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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解Javascript中prototype屬性(推薦)
這篇文章主要介紹了Javascript中prototype屬性的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-09-09
10個(gè)很少使用的JavaScript?Console方法分享
你一定聽(tīng)說(shuō)過(guò)?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺(tái)方法,以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下
2023-09-09
vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn)
這篇文章主要介紹了vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn),通過(guò)實(shí)例代碼補(bǔ)充介紹了vue+elementui的this.$loading遮罩使用方法,需要的朋友可以參考下
2024-03-03
利用uniapp開(kāi)發(fā)APP時(shí)的調(diào)試/安卓打包等詳解
uni-app??是一個(gè)使用??Vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于利用uniapp開(kāi)發(fā)APP時(shí)的調(diào)試/安卓打包等的相關(guān)資料,需要的朋友可以參考下
2022-12-12
容易被忽略的JS腳本特性
容易被忽略的JS腳本特性，學(xué)習(xí)js的朋友可以參考下。
2011-09-09
判斷腳本加載是否完成的方法
在“按需加載”的需求中，我們經(jīng)常會(huì)判斷當(dāng)腳本加載完成時(shí)，返回一個(gè)回調(diào)函數(shù)，那如何去判斷腳本的加載完成呢？
2009-05-05
微信小程序MoxB實(shí)現(xiàn)全局狀態(tài)管理流程詳解
這篇文章主要介紹了微信小程序使用MoxB實(shí)現(xiàn)全局狀態(tài)管理方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)新聞?shì)啿バЧ闹惺纠a介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07