快捷導(dǎo)航

JS實(shí)現(xiàn)判斷圖片是否加載完成的方法分析

更新時(shí)間：2018年07月31日 10:34:26 作者：筱葭

這篇文章主要介紹了JS實(shí)現(xiàn)判斷圖片是否加載完成的方法,結(jié)合實(shí)例形式分析了javascript常見(jiàn)的圖片加載完成判斷方法與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)判斷圖片是否加載完成的方法。分享給大家供大家參考，具體如下：

1、onload事件

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <img src="images/background.png">
    <p>loading...</p>
    <script type="text/javascript">
      document.getElementsByTagName("img")[0].onload =function() {
        document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
      }
    </script>
  </body>
</html>

2、complete屬性

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <img src="images/background.png">
    <p>loading...</p>
    <script type="text/javascript">
      function imgLoad(img, callback) {
        var timer = setInterval(function() {
          if (img.complete) {
            callback(img);
            clearInterval(timer);
          }
        }, 50);
      }
      imgLoad(document.getElementsByTagName("img")[0], function() {
        document.getElementsByTagName("p")[0].innerHTML = '加載完成！';
      })
    </script>
  </body>
</html>

3、onreadystatechange事件

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <img src="images/background.png">
    <p>loading...</p>
    <script type="text/javascript">
      document.getElementsByTagName("img")[0].onreadystatechange = function() {
        if (this.readyState=="complete" || this.readyState=="loaded")
          document.getElementsByTagName("p")[0].innerHTML = '加載完成';
      }
    </script>
  </body>
</html>

注意：只有IE6-IE10支持onreadystatechange事件，其它瀏覽器不支持。

4、onerror事件

網(wǎng)絡(luò)狀況不好或圖片不存在都可能觸發(fā)onerror事件。

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <img src="images/notExistImg.png">
    <p>loading...</p>
    <script type="text/javascript">
      document.getElementsByTagName("img")[0].onload =function() {
        document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
      }
      document.getElementsByTagName("img")[0].onerror =function() {
        document.getElementsByTagName("img")[0].src = "images/background.png";
      }
    </script>
  </body>
</html>

觸發(fā)onerror事件后，會(huì)為img指定一個(gè)新的圖片。

問(wèn)題：

新圖片存在則顯示新圖片，但若新圖片也不存在，則將繼續(xù)觸發(fā)onerror，導(dǎo)致頁(yè)面循環(huán)跳動(dòng)。

解決：

通過(guò)將onerror置為null，來(lái)防止頁(yè)面循環(huán)跳動(dòng)。

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <img src="images/notExistImg.png">
    <p>loading...</p>
    <script type="text/javascript">
      document.getElementsByTagName("img")[0].onload =function() {
        document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
      }
      document.getElementsByTagName("img")[0].onerror =function() {
        document.getElementsByTagName("img")[0].src = "images/backgeound.png";
        document.getElementsByTagName("img")[0].onerror = null;
        document.getElementsByTagName("p")[0].innerHTML ='加載失??！';
      }
    </script>
  </body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: