javascript判断图片是否已加载完成

[shly]

<img src="1111.png" id="imgDemo">

1. 通过img对象的onload事件 图片加载完成会触发onload事件 imgDemo.onload = function () {console.log('loaded')} 如果在html文档中使用id属性来为元素命名， 并且如果window对象没有此名字的属性，window对象会赋予一个属性，它的名字是id属性的值，而它们的值指向表示文档元素的HTMLElement对象

2. 通过img的complete属性

   function imgLoad(img, callback) {
      var timer = setInterval(function() {
         if (img.complete) {
          callback(img)
           clearInterval(timer)
          }
       }, 50)
   }
   imgLoad(imgDemo, function() {
     console.log(imgDemo.complete)
    })`

[shly]

img的onload和complete的区别

 <input type="button" name="" id="btn" value="add">
 <script type="text/javascript">
  btn.onclick = function() {  
  var img = new Image();  
  img.src="1111.png";  
  if(img.complete) {  
    console.log('complete');  
  } 
  img.onload = function() {  
    console.log('onload ')  
  }  
}  

在chrome中测试结果有以下几种情况

1. 运行上面的代码， 第一次点击时只输出onload ， 以后每次点击都先输出complete，后输出onload
2. 将上面代码中的 img.src="1111.png" 删掉，次点击都只输出complete
3. 将上面代码中的 img.src="1111.png" 放在最后，则每次点击都先输出complete，后输出onload

待查看文档看onload和complete的执行时机