js中Image對象以及對其預加載處理示例

2019-11-20 21:38:34

字體：大中小

來源：轉載

供稿：網友

不顯示在文檔中的 Image 對象

對于不顯示在文檔中的 Image 對象時用 var 語句定義的：

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

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

預讀圖像的 JavaScript 例子

復制代碼代碼如下:

 
var imagePreload = new Image(); 

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

以上例子適合預讀少量圖片。

復制代碼代碼如下:

 
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'); 

以上例子適合預讀大量圖片。

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

復制代碼代碼如下:

 
function loadImage(url, callback) { 
var img = new Image(); //創(chuàng)建一個Image對象，實現圖片的預下載 
img.src = url; 

if (img.complete) { // 如果圖片已經存在于瀏覽器緩存，直接調用回調函數 
callback.call(img); 
return; // 直接返回，不用再處理onload事件 
} 

img.onload = function () { //圖片下載完畢時異步調用callback函數。 
callback.call(img);//將回調函數的this替換為Image對象 
}; 
}; 