完美世界国际版下载,完美世界国际版下载,盗墓笔记小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

JS如何實(shí)現(xiàn)判斷圖片是否加載完成

這篇文章給大家分享的是有關(guān)JS如何實(shí)現(xiàn)判斷圖片是否加載完成的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)是少有的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷型企業(yè)網(wǎng)站、微信小程序、手機(jī)APP,開(kāi)發(fā)、制作、設(shè)計(jì)、買鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,自2013年起,堅(jiān)持透明化,價(jià)格低,無(wú)套路經(jīng)營(yíng)理念。讓網(wǎng)頁(yè)驚喜每一位訪客多年來(lái)深受用戶好評(píng)

js有什么特點(diǎn)

1、js屬于一種解釋性腳本語(yǔ)言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語(yǔ)言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語(yǔ)言安全性高，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語(yǔ)言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

具體如下：

1、onload事件



  
    
  
  
    
    loading...
    
      document.getElementsByTagName("img")[0].onload =function() {
        document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
      }

2、complete屬性



  
    
  
  
    
    loading...
    
      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 = '加載完成！';
      })

3、onreadystatechange事件



  
    
  
  
    
    loading...
    
      document.getElementsByTagName("img")[0].onreadystatechange = function() {
        if (this.readyState=="complete" || this.readyState=="loaded")
          document.getElementsByTagName("p")[0].innerHTML = '加載完成';
      }

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

4、onerror事件

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



  
    
  
  
    
    loading...
    
      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";
      }

觸發(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)。



  
    
  
  
    
    loading...
    
      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 ='加載失?。?#39;;
      }

感謝各位的閱讀！關(guān)于“JS如何實(shí)現(xiàn)判斷圖片是否加載完成”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

本文名稱：JS如何實(shí)現(xiàn)判斷圖片是否加載完成
分享路徑：http://fisionsoft.com.cn/article/gchgep.html

新聞中心

js有什么特點(diǎn)

其他資訊