轉_關於圖片的預先載入

function loadImage(url, callback) {         var img = new Image(); //建立一個Image對象，實現圖片的預下載         img.src = url;                 if (img.complete) { // 如果圖片已經存在於瀏覽器緩衝，直接調用回呼函數             callback(img);             return; // 直接返回，不用再處理onload事件         }             img.onload = function () { //圖片下載完畢時非同步呼叫callback函數。              callback(img);       };     };

 

在網上搜尋了一下相關文章，大體上都是這個思路。

這個方法功能是ok的，但是有一些隱患。

1  建立了一個臨時匿名函數來作為圖片的onload事件處理函數，形成了閉包。

相信大家都看到過ie下的記憶體流失模式的文章，其中有一個模式就是循環參考，而閉包就有儲存外部運行環境的能力（依賴於範圍鏈的實現），所以 img.onload這個函數內部又儲存了對img的引用，這樣就形成了循環參考，導致記憶體流失。（這種模式的記憶體流失只存在低版本的ie6中，打過補丁 的ie6以及高版本的ie都解決了循環參考導致的記憶體流失問題）。

2  只考慮了靜態圖片的載入，忽略了gif等動態圖片，這些動態圖片可能會多次觸發onload。

在ie，opera下，對於緩衝圖片的初始狀態，與firefox和safari，chrome下是不一樣的（有興趣的話，可以在不同瀏覽器下，測試一下 在給img的src賦值緩衝圖片的url之前，img的狀態），但是對onload事件的觸發，卻是一致的，不管是什麼瀏覽器。產生這個問題的根本原因在 於，img的src賦值與 onload事件的綁定，順序不對（在ie和opera下，先賦值src，再賦值onload，因為是緩衝圖片，就錯過了onload事件的觸發）。應該 先綁定onload事件，然後再給src賦值，代碼如下：

function loadImage(url, callback) {         var img = new Image(); //建立一個Image對象，實現圖片的預下載         img.onload = function(){        img.onload = null;        callback(img);    }    img.src = url; } 這樣記憶體流失，動態圖片的載入問題都得到瞭解決，而且也以統一的方式，實現了callback的調用。

 轉：http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html