设置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上面。

Answer 2

304后onload不会触发
你试试把onload事件写在设置src之前

Answer 3

var img = new Image();

img.addEventListener('onload', function(){
  document.body.appendChild(img);
} , false);

img.src = 'test.png';

Answer 4

你的代码有问题，事件加错了，如下：

var img = new Image();

// 如果文档装入完成后加载用window load
//window.addEventListener("load" , function(){
//    document.body.appendChild(img);
//} , false);
        
// 如果图片加载完毕用 img load
img.addEventListener("load",function(){
      document.body.appendChild(img);
},false);
img.src = 'http://img5.imgtn.bdimg.com/it/u=4021999557,1995524928&fm=11&gp=0.jpg';