網頁中圖片預加載的原理

其實我並不清楚圖片預加載的原理，只是一些猜測。

網上介紹的圖片預加載，基本上都在說javascript中應該怎么樣怎么樣，new一個Image()對象。

但是，老大，預加載的目的，歸根到底，還是要將這個圖片顯示出來。你javascript里面的這個Image對象，要怎么樣才能讓網頁的img標簽顯示出來呢？

沒說，好像都沒說。

在HTML標簽IMG里，src屬性可以指向一個web服務，這是人所共知的。問題是，它能指向js的那個Image對象嗎？未聞也。
從網上一些示例看，我猜是這樣的：

javascript代碼：

var img = new Image();
img.src = "圖片路徑";//將圖片加載到JS對象img里

html:

<!-- html里的img標簽，其src與js的Image對象一致，圖片的預加載就能派上用場！ -->
<img id="img1" src="圖片路徑，與js的Image對象的src一致" alt="左直拳艷照門" />

就是這樣，首先在JS里面進行預加載，然后html里的img就能自然而然地用上了這個預加載！

如果真的是這樣的話，控制這一切的，是瀏覽器，它統一協調了JS和HTML。

利用JS對圖片進行加載，有時會比較方便，比如設置圖片加載完畢以后，觸發一些啥東東；或通過Image對象，獲得圖片的width、height屬性，等等。

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {//如果有緩存
        //接下來可以使用圖片了
        //do something here
    }
    else {
        img.onload = function() {
            img.onload = null;
            //接下來可以使用圖片了
            //do something here
        };
    }
}

版權聲明：本文為博主原屙文章，喜歡你就擔走。