img的complete和onload

HTML DOM complete 屬性

定義和用法:

complete 屬性可返回瀏覽器是否已完成對圖像的加載。

若是加載完成，則返回 true，不然返回 fasle。

語法:

imageObject.complete

 

Image onload 事件

定義和用法:

onload 事件在圖片加載完成後當即執行。

語法

onload="JavaScriptCode"

 

complete只是HTMLImageElement對象的一個屬性，而onload則是這個Image對象的load事件回調，前者不能準確的在事件發生時進行異步回調而且在瀏覽器的兼容性上也有些問題。

 這二者，只有img.complete能夠判斷圖片加載完成，img.onload並不能判斷圖片是否加載完，而是在加載完畢以後，直接運行onload綁定的函數。

 

img加載完成就會解除onload事件，src是異步加載圖片的，若是在綁定事件前就已經加載完成，onload事件不會觸發。img.complete是一直都有的屬性，加載完成後爲true。

 

img.onload是當一張圖片被加載完成後所觸發的事件
實現圖片顯示功能；
<div>
<img id="img"/>
</div>

js部分：img.src="圖片";
img.onload=showImg；
function showImg(){
   代碼部分。。。。

}

對於 complete 屬性來說，IE是根據圖片是否顯示過來判斷，就是說當加載的圖片顯示出來後，complete 屬性的值才爲 true ，不然一直是 false ，和之前是否加載過該張圖片沒有關係，即和緩存沒有關係！這裏要注意，顯示與否和img.style.display無關；

JS部分： alert（img.complete）;----->false
img.src="圖片";
alert(img.complete);------->//若是上面「圖片」獲取的時間比JS代碼順序執行的時間要長，那麼這裏就是false，不然就是true。

 

下面看一個例子:
<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，可是若是重複點擊會怎樣呢？在IE中，除了第一次加載 圖片時候顯示正常，以後再點擊就沒有反應了，刷新也同樣。FF中，每點擊一次加載一張該圖片。而這是什麼緣由呢？是由於在IE中只執行了一次onload或者是緩存的問題嗎？先改寫一下代碼，

<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沒有觸發onload事件，而是由於IE中加載緩衝區的速度太快，以致於沒有運行到img.onload的時候，圖片已經被加載完畢了。所以，能夠先告訴瀏覽器如何處理這張圖片，而後再製定這張圖片的來源。通常狀況下，能夠用complete來判斷圖片是否加載完畢。對於 complete 屬性來說，IE是根據圖片是否顯示過來判斷，就是說當加載的圖片顯示出來後，complete 屬性的值才爲true ，不然一直是false ，和之前是否加載過該張圖片沒有關係，即和緩存沒有關係！能夠寫以下的函數來作到各個瀏覽器中預加載圖片的兼容性。

var imgLoad = function (url) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
};