js判斷網頁是否加載完畢----包括圖片

時間 2020-09-20

原文原文鏈接

在作頁面的時候,常常碰到要在頁面加載徹底以後再去展示。這時候咱們會直接想到使用window.onload的方式,或者是採用Jquery的ready方法判斷,這在必定程度能夠搞定。html

window.onload方式瀏覽器

window.onload =function()
{
    //your code  
}

Jquery的ready方法spa

//: 判斷網頁是否加載完成     
           document.onreadystatechange = function () {      
               if(document.readyState=="complete") {            
                   document.getElementById('divprogressbar').style.display='none';      
               }     
           }

;(function($,undefined){
    $(function(){
    //your code
    });
})(window.jQuery);

可是上面的方法只能判斷Dom的加載狀態,不能判斷圖片是否加載成功。若是碰到頁面須要圖片加載完成才能展示的狀況,咱們就沒法搞定了。.net

現提供兩種方式判斷圖片是否加載完成。code

使用onload的圖片加載事件檢測orm

這裏是使用onload和onerror檢測判斷,可是有時候不能檢測到圖片是否加載完成,再使用過程當中,我發現它只是判斷全部圖片開始加載時就觸發了,不過基本能夠知足需求。htm

使用complete的圖片屬性檢測對象

這裏咱們採用定時器不斷檢測圖片的complete屬性,這個比較完美,只有圖片確實加載完成時,纔會變成真,因此比較可靠,建議採用。blog

參考出處：http://jingyan.baidu.com/article/63acb44a376f5961fcc17ef0.html事件

====================================================================

在網上有不少關於判斷圖片是否已經加載完畢的文章，可是有的瀏覽器並不適合，下面小編給你們分享一些有關JavaScript判斷圖片是否已經加載完畢方法彙總，具體內容以下所示：

一.onload事件

經過監聽圖片的onload事件，能夠判斷圖片是否已經加載完成，兼容全部的瀏覽器（w3c推薦方法），代碼示例以下

 
          <!DOCTYPE html> 
         
          <html lang= 
          "en" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>Document</title> 
         
          </head> 
         
          <body> 
         
          <img id= 
          "img1" 
          src= 
          "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" 
          alt= 
          "" 
          > 
         
          <script> 
         
          // 方法一：圖片已經下載完 
         
          document.getElementById( 
          'img1' 
          ).onload =  
          function 
          (e){ 
         
          e.stopPropagation(); 
         
          alert(1); 
         
          } 
         
          </script> 
         
          </body> 
         
          </html>

二.判斷img對象（DOM）的complete屬性

當img加載完成以後，complete對象屬性將變爲true，代碼示例以下：

 
          <!DOCTYPE html> 
         
          <html lang= 
          "en" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>Document</title> 
         
          </head> 
         
          <body> 
         
          <img id= 
          "img1" 
          src= 
          "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" 
          alt= 
          "" 
          > 
         
          <script> 
         
          // 方法二：img的complate屬性 
         
          var 
          timer = setInterval( 
          function 
          (){ 
         
          if 
          (document.getElementById( 
          'img1' 
          ).complete){ 
         
          clearInterval(timer); 
         
          alert(1); 
         
          console.log(document.getElementById( 
          'img1' 
          ).complete) 
         
          } 
         
          }, 10); 
         
          </script> 
         
          </body> 
         
          </html>

親測該方法一樣可兼容全部瀏覽器

三.onreadystatechange事件

在ie下，img對象與xhr對象同樣具備onreadystatechange事件，能夠通郭建廷該事件判斷圖片是否加載完成，代碼示例以下：

 
          <!DOCTYPE html> 
         
          <html lang= 
          "en" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>Document</title> 
         
          </head> 
         
          <body> 
         
          <img id= 
          "img1" 
          src= 
          "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" 
          alt= 
          "" 
          > 
         
          <script> 
         
          document.getElementById( 
          'img1' 
          ).onreadystatechange =  
          function 
          () { 
         
          if 
          (document.getElementById( 
          'img1' 
          ).readyState== 
          "complete" 
          ||document.getElementById( 
          'img1' 
          ).readyState== 
          "loaded" 
          ){ 
         
          alert(1); 
         
          } 
         
          } 
         
          </script> 
         
          </body> 
         
          </html>