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

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.src = isrc;

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 這種解釋性語言的特性，在追加事件的時候一定要注意把事件追加在觸發該事件的句柄之前。