设置Img 的 onload 事件时，有很大的几率不会触发 onload 事件怎么解决？？

Question

问题描述如下：

var img = new Image();
img.src = 'test.png';// F5刷新5次页面，可能有2 ~ 3 次图片不显示
// 不是网速问题，页面时一瞬间加载完成，图片也是小图片，秒速加载完成，可就是加载完了，也不会触发事件
// 怎样才能确保只要 loaded 就触发 onload 事件 ？？
img.addEventListener(img , function(){  document.body.appendChild(img);
} , false);

感谢大家回答，问题已解决。是我没把具体情况说清楚哈...，是我的错~

说说这次我遇到的坑哈，分享下经验：

var img = new Image();

var src = 'test.jpg';

img.src = src;

// getImageInfo 是一个异步事件

// 传入图片路径，会获取图片的尺寸信息，然后调用回调，带入参数

getImageInfo(src , function(info){

  // Error: 成功获取图片尺寸信息后，等待图片加载完成进行操作

  // 问题就出在这儿，getImageInfo 是异步的，而 img.src = 'test.jpg' 老早就定义了。

  // 等获取尺寸成功后，图片早就加载完成了，所以才导致有的时候不触发 onload 事件！

  img.onload = function(){

       console.log('图片加载完成');

  }

})

// 代码修改如下后，就解决了

var src = 'test.png';

getImageInfo(src , function(info){

  var img = new Image();

  img.src = src;

  img.addEventListener('load' , function(){...} , false);

});

Answer 1

var img = new Image();img.addEventListener('load', function() {    document.body.appendChild(img);}, false);img.src = 'aa.jpg';更换顺序，图片加载是异步。为了防止意外，最好把回调函数写在src上面。