使用jquery實現圖片預加載提高頁面加載速度和用戶體，本就為大家詳細分析jquery圖片預加載的實現原理。
什么時候使用圖片預加載？
如果頁面使用了很多不是最初加載便可見的圖片，有必要進行預加載：
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('img').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
下面我來介紹一種在實際應用中經常會使用到的js預加載的方法。
首先在輸出圖片的時候我們做一些處理<imgdata="這里是我們要顯示圖片的實際地址"src="這里是一張默認顯示的小圖片，可以快速加載到頁面。可以是所有圖片使用統一的圖片也可以是要顯示圖片的縮略圖"alt="圖片名"/> 處理完html我們開始寫js了，在這里我使用了jquery的類庫。
$('img[data]').load(function(){
var __this__ = $(this);
var url = __this__.attr('data');
var src = __this__.attr('src');
if(url ==''|| url == src)//這里判斷如果圖片實際地址不存在或者已經加載不處理
{
return;
}
var img =newImage();//實例化一個圖片的對象
img.src = url;//將要顯示的圖片加載進來
if(img.complete)//如果圖片已經加載存在瀏覽器緩存中直接處理
{
__this__.attr('src',url);//將要顯示的圖片替換過來
return;
}
img.onload =function(){//要顯示的圖片加載完成后做處理
__this__.attr('src',url);
}
});