首頁 >web前端 >js教程 >js圖片預先載入範例_基礎知識

js圖片預先載入範例_基礎知識

WBOY
WBOY原創
2016-05-16 16:50:331153瀏覽

js圖片預先載入簡單範例

複製程式碼 程式碼如下:

function loadImage( url, callback) {
    if(url!='null') {
        var img = new Image();
  .complete) {
            callback(img);
        } else {
              img.onload = null;
                   }
    }
}

loadImage(pic_url,loadImage);



另一個詳細詳解範例


另一個詳細詳解範例

透過js操縱DOM很多情況下都是為了實現和當前頁html元素的非同步載入,我談談對Image物件的一些認識。
看範例:

複製程式碼 程式碼如下:





當包含上述程式碼的「頁開啟」時並未載入上述程式碼的「包含」 tt.jpg” ,點擊按鈕時候才載入。當載入完成後觸發onload事件顯示到頁面上。
如果你是第一次載入 “tt.jpg" 這張圖片的話,運作正常。點擊按鈕載入並顯示一張圖片,如果重複點擊會怎麼樣呢?
IE、Opera中,除了第一次載入 圖片時候顯示正常,之後再點擊就沒有反應了,刷新也一樣。難道它們只觸發一次 」onload「 事件?是快取機制?
FF、Chrom中,每點擊一次載入一張該圖片。

稍微修改下:


複製程式碼 程式碼如下:




運行後發現,奇怪的事情發生了。所有的瀏覽器都一致了,都是每點擊一次載入一張圖片。這又是什麼原因?
由此可以見 IE、Opera 執行過程中並不是只觸發一次 onload 事件!
聯想一下Image 物件的一些屬性看看,complete、readyState(IE專屬值[uninitialized,complete]) (為防止快取影響效果請更換圖片名稱!)



複製程式碼

程式碼如下:






經過以上測試,可以看出一些不同點,對於complete 屬性來講,IE是根據圖片是否顯示過來判斷,是說當載入的圖片顯示出來後,
complete 屬性的值才為true ,否則一直是false ,和以前是否加載過該張圖片沒有關係,即和緩存沒有關係!
但是其它瀏覽器表現出來的確不一樣,只要以前加載過該圖,瀏覽器有緩存,complete 就為 true ,
這和IE的 readyState 屬性的表現一致!
至此,可以肯定的是所有的瀏覽器都會快取圖片!可是上面的問題到底是什麼原因導致的呢?
眾所周知,從快取裡載入東西的速度是很快的,那麼在



Img.onload = ...


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

這回加載一張根本不存在的圖片看看效果:



複製程式碼 代碼如下:



可以肯定的是所有瀏覽器都不會觸發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 這種解釋性語言的特性,在追加事件的時候一定要注意把事件追加在觸發該事件的句柄之前。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn