js中Image物件以及對其預先載入處理範例_javascript技巧

不顯示在文檔中的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() { Preload> Image();
for (i = 0; i imgPreload.src = arguments[i];

} } imagePreload( '001.gif', '002.gif', '003.gif', '004.gif', '005.gif'); 以上例子適合預讀大量圖片。

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




複製程式碼


程式碼如下:


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

if (img.complete) { // 如果圖片已經存在於瀏覽器緩存，直接呼叫回呼函數callback.call(img); return; // 直接傳回，不用再處理onload事件} img.onload = function () { //圖片下載完畢時非同步呼叫callback函數。 callback.call(img);//將回呼函數的this替換為Image物件 }; };