jquery實現圖片預先載入

標籤：

使用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);
}
});

jquery實現圖片預先載入