快捷導(dǎo)航

js中Image對(duì)象以及對(duì)其預(yù)加載處理示例

更新時(shí)間：2013年11月20日 16:15:48 作者：

現(xiàn)在的網(wǎng)頁中經(jīng)常會(huì)有一些圖像連接，當(dāng)鼠標(biāo)指向它的時(shí)候，圖像換成另外一幅圖像，它們都是先預(yù)讀圖像的，下面也有個(gè)不錯(cuò)的實(shí)例，感興趣的朋友可以參考下

不顯示在文檔中的 Image 對(duì)象

對(duì)于不顯示在文檔中的 Image 對(duì)象時(shí)用 var 語句定義的：

復(fù)制代碼代碼如下:

 
var myImage = new Image();或 
var myImage = new Image(<圖片地址字符串>); 

然后就可以像一般 Image 對(duì)象一樣對(duì)待 myImage 變量了。不過既然它不顯示在文檔中，以下屬性：lowsrc, width, height, vspace, hspace, border 就沒有什么用途了。一般這種對(duì)象只有一個(gè)用：預(yù)讀圖片(preload)。因?yàn)楫?dāng)對(duì)對(duì)象的 src 屬性賦值的時(shí)候，整個(gè)文檔的讀取、JavaScript 的運(yùn)行都暫停，讓瀏覽器專心的讀取圖片。預(yù)讀圖片以后，瀏覽器的緩存里就有了圖片的 Copy，到真正要把圖片放到文檔中的時(shí)候，圖片就可以立刻顯示了。現(xiàn)在的網(wǎng)頁中經(jīng)常會(huì)有一些圖像連接，當(dāng)鼠標(biāo)指向它的時(shí)候，圖像換成另外一幅圖像，它們都是先預(yù)讀圖像的。

預(yù)讀圖像的 JavaScript 例子

復(fù)制代碼代碼如下:

 
var imagePreload = new Image(); 

imagePreload.src = '001.gif'; 
imagePreload.src = '002.gif'; 
imagePreload.src = '003.gif'; 

以上例子適合預(yù)讀少量圖片。

復(fù)制代碼代碼如下:

 
function imagePreload() { 
var imgPreload = new Image(); 
for (i = 0; i < arguments.length; i++) { 
imgPreload.src = arguments[i]; 
} 
} 

imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif'); 

以上例子適合預(yù)讀大量圖片。

因?yàn)樵S多瀏覽器存在的緩存問題。當(dāng)圖片加載過一次之后，如果再有對(duì)該圖片的請(qǐng)求時(shí)，由于瀏覽器已經(jīng)緩存住這張圖片了，不會(huì)再發(fā)起一次新的請(qǐng)求，而是直接請(qǐng)緩存中加載過來，經(jīng)過分析，可以使用各個(gè)瀏覽器所兼容的Image的屬性--complete。所以在圖片onload事件之前先對(duì)這個(gè)值做下判斷即可，如下例子：

復(fù)制代碼代碼如下:

 
function loadImage(url, callback) { 
var img = new Image(); //創(chuàng)建一個(gè)Image對(duì)象，實(shí)現(xiàn)圖片的預(yù)下載 
img.src = url; 

if (img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù) 
callback.call(img); 
return; // 直接返回，不用再處理onload事件 
} 

img.onload = function () { //圖片下載完畢時(shí)異步調(diào)用callback函數(shù)。 
callback.call(img);//將回調(diào)函數(shù)的this替換為Image對(duì)象 
}; 
}; 

您可能感興趣的文章: