js 實現圖片預加載 (js操作 Image對象屬性complete ,事件onload 異步加載圖片) – Javascript教程_JS教程_技術文章 – 程式設計聯盟

js 實現圖片預加載 (js操作 Image對象屬性complete ,事件onload 異步加載圖片)
通過js操縱DOM很多情況下都是為瞭實現和當前頁html元素的異步載入,我談談對Image對象的一些認識。
看個例子:
<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!–
    function addImg(isrc)
    {
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
    }
//–>
</script>
當包含上述代碼的頁面打開時並不載入 “tt.jpg” ,當點擊按鈕時候才載入。當載入完成後觸發onload事件顯示到頁面上。如果你是第一次加載 “tt.jpg" 這張圖片的話,運行正常。點擊按鈕加載並顯示一張圖片,如果重復點擊會怎麼樣呢?
IE、Opera中,除瞭第一次加載 圖片時候顯示正常,之後再點擊就沒有反應瞭,刷新也一樣。難道它們隻觸發一次 ”onload“ 事件?是緩存機制?
FF、Chrom中,每點擊一次加載一張該圖片。

稍微修改下:
<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!–
    function addImg(isrc)
    {
        var Img = new Image();
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//–>
</script>
運行後發現,奇怪的事情發生瞭。所有的瀏覽器都一致瞭,都是每點擊一次加載一張圖片。這又是什麼原因?由此可以見 IE、Opera 執行過程中並不是隻觸發一次 onload 事件!

聯想一下 Image 對象的一些屬性看看,complete、readyState(IE專屬值[uninitialized,complete]) (為防止緩存影響效果請更換圖片名稱!)
<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!–
    var Img;
    function addImg(isrc)
    {
        Img = new Image();
        //Img.src = isrc;
        Img.onload = function ()
        {
            alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
            document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//–>
</script>
經過以上測試,可以看出一些不同點,對於 complete 屬性來講,IE是根據圖片是否顯示過來判斷,就是說當加載的圖片顯示出來後,complete 屬性的值才為 true ,否則一直是 false ,和以前是否加載過該張圖片沒有關系,即和緩存沒有關系!但是其它瀏覽器表現出來的確不一樣,隻要以前加載過該圖,瀏覽器有緩存,complete 就為 true ,這和IE的 readyState 屬性的表現一致!
至此,可以肯定的是所有的瀏覽器都會緩存圖片!可是上面的問題到底是什麼原因導致的呢?
眾所周知,從緩存裡加載東西的速度是很快的,那麼在

Img.src = isrc;
Img.onload = …

的過程中,難道 IE、Opera 加載的速度快到,來不及追加事件?

這回加載一張根本不存在的圖片看看效果:
<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!–
    var Imgttmt;
    function addImg(isrc)
    {
        Imgttmt = new Image();
        Imgttmt.src = isrc;
        alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
        Imgttmt.onload = function ()
        {
            alert("impossible")
        }
    }
//–>
</script>
可以肯定的是所有瀏覽器都不觸發 onload 事件。從是否緩存或已經加載過圖片的角度講,IE、Opera表現正常,complete 始終為 false ;IE的 readyState 始終為uninitialized 。令人疑惑的是FF,其中 Imgttmt.complete 的值一直是 true ;更令人困惑的是 Chrom,它是在最初 new Imgttmt() 的時候 Imgttmt.complete 值為 false。而之後 Imgttmt.complete 值就一直為 true 瞭!如果換一張從來沒有加載過的圖片,FF和Chrom 的行為就一致瞭,都是一開始加載時, Imgttmt.complete 值為false, 之後為 true!

測試的過程中還發現,腳本的執行順序的確會影響到類似於 onload 等事件的追加,如果在其顯示後在追加事件就沒有什麼實際意義瞭!基於 javascript 這種解釋性語言的特性,在追加事件的時候一定要註意把事件追加在觸發該事件的句柄之前。 

摘自 PainsOnline的專欄 

發佈留言