1. 程式人生 > >js 判斷圖片加載完成

js 判斷圖片加載完成

img image() on() clas for html ads content ech

// HTML
<img id=‘xiu‘ src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg">  

//js
 $(document).ready(function(){

    //jquery
    $(‘#xiu‘).load(function(){
       // 加載完成 
    });

   //原生  onload
    var xiu = document.getElementById(‘xiu‘)
    xiu.onload = xiu.onreadystatechange = function(){
       if(!this.readyState||this.readyState==‘loaded‘||this.readyState==‘complete‘){
           // 加載完成 
       }
    };

})

1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;
2、readyState是onreadystatechange事件的一個狀態,值為loaded或complete的時候,表示已經加載完畢。

多張圖片

var img = [],  
    flag = 0, 
    mulitImg = [
    ‘http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg‘,
    ‘http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg‘,
    ‘http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg‘,
    
‘http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg‘ ]; var imgTotal = mulitImg.length; for(var i = 0 ; i < imgTotal ; i++){ img[i] = new Image() img[i].src = mulitImg[i] img[i].onload = function(){ //第i張圖片加載完成 flag++ if( flag == imgTotal ){ //全部加載完成 } } }

js 判斷圖片加載完成