js判断指定div或区域内的图片加载是否完成

js 判断 指定 图片 加载 完成

第一：
 var i=0;
 var str='';
 $('#body img').each(function (index) {
  this.id='img'+index; //先给图片设置好ID，利用ID获取图片（不知道为什么用$(this)设置值不能设  置，获取就可以）
 var img = new Image();
 
 img.onload = function () { //图片加载成功时
   i++;
   $('#img'+index)[0].className='asdf'+index;
   //console.log($(this).attr('src') + ' - 成功');
   str=str+$('#img'+index)[0].className;
   if(i == $('img').length) {
     domIsReady(); //全部图片加载完成才会触发
   }
 }
 
 
  img.onerror=function(){ //图片加载失败时

  }

  img.src = $(this).attr('src');

});

function domIsReady(){ //全部图片加载完成才会触发
   document.title=str;
};

或者：

去除var img = new Image();（因为每加载一个img就会自动创建一个imgage对象）

第二： 
var i=0;
 var str='';
 $('#body img').each(function (index) {
    this.id='img'+index; //先给图片设置好ID，利用ID获取图片（不知道为什么用$(this)设置值不能设置，获取就可以）
 // console.log(this)  
   this.onload = function () { //图片加载成功时
   i++;
    $('#img'+index)[0].className='asdf'+index;
    //console.log($(this).attr('src') + ' - 成功');
    str=str+$('#img'+index)[0].className;
    if(i == $('img').length) {
      domIsReady(); //全部图片加载完成才会触发
    }
 }
 
 
  this.onerror=function(){ //图片加载失败时

  }

  this.src = $(this).attr('src');

});


function domIsReady(){ //全部图片加载完成才会触发
    document.title=str;
 };

说第二种方法思路：

利用each()遍历指定区域内的img，每加载一个<img>标签就等于创建一个了new Image()对象，在each()遍历获取this的同时this就是Image对象，然而Image对象又拥有onload和onerror方法。

onload方法：图片一旦加载完成并显示出来就会触发。

onerror方法：图片加载失败就会触发。

第一种方法多了一个new Image()感觉没必要因为没加载到一个<img>的时候就等于new Image()了一个对象了。

加载图片成功时候: demo

加载图片很难的时候:demo1