JS判斷圖片是否加載完成三種方式

1.img的complete屬性

輪詢不斷監測img的complete屬性，如果為true則表明圖片已經加載完畢，停止輪詢。該屬性所有瀏覽器都支持。

<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<script>
    function imgLoad(img, callcack) {
        var timer = setInterval(function () {
            if (img.complete) {//判斷圖片是否加載完成
                callcack(img)
                clearInterval(timer);
            }
        }, 50);
    }
    imgLoad(img1, function () {
        p1.innerHTML = '加載完成';
    });
</script>

判斷圖片是否在緩存中已經存在

<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<img id="img2" />
<script>
    //證明complete 屬性不僅可以判斷圖片是否加載成功，還可以判斷圖片是否已經在緩存中存在
    console.info(img1.complete)
    setTimeout(function () {
        if (img1.complete) {
            console.info('加載成功' + img1.src);
            img2.src = img1.src;
            if (img2.complete) {
                console.info('img2加載成功');
            }
        } else {

        }
    }, 100);
</script>

2.Load事件

<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<script>
    //圖片加載成功觸發事件
    img1.onload = function () {
        alert(3);
        p1.innerHTML = "圖片加載成功";
    }
</script>

測試，所有瀏覽器都顯示出了“loaded”，說明所有瀏覽器都支持img的load事件

3.readystatechange事件

readyState為complete和loaded則表明圖片已經加載完畢。測試IE6-IE10支持該事件，其它瀏覽器不支持。

<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
    img1.onreadystatechange = function() {
        if(img1.readyState=="complete"||img1.readyState=="loaded"){
            p1.innerHTML = 'readystatechange:loaded'
        }
    }
</script>