一个javascript加载图片的问题

Question

在高程三和一些博客上都可以看到一个图片的异步加载的例子

回调函数版：
function loadImage(url,cb){
    var img = new Image();
    img.onload=function(){
        cb(img);
    }
    img.src=url;
}

promise版本：
function loadAsyncImage=function(url){
return new Promise(resolve,reject){
    var image = new Image();
    image.onload = () =>{
        resolve(image);
    };
    image.onerror = () =>{
        reject(new Error('Could not load image at '+url));
    };
    image.src=url;
}

}
我想知道，img.src=url为什么都要写在最后，写在为图片对象绑定回调函数那句代码之前可不可以呢

Answer 1

如果我没记错的话，img只要设置src属性，就会开始下载，而script这种，需要添加了src属性并且添加到文档中才会开始下载，在某些情况下，如果提前设置了img的src，而事件绑定比较晚，或者图片提前加载完毕，就可能不会触发对应事件，一般应该没有太大差别，只是这样写更符合处理顺序吧，第三版《JavaScript高级程序设计》第364页有说这个问题

Answer 2

可以 没区别

Answer 3

js内部是按顺序逐行执行的，可以认为是同步的
给imgae赋值src时，去加载图片这个过程是异步的，这个异步过程完成后，如果有onload，则执行onload

如果先赋值src，那么这个异步过程可能在你赋值onload之前就完成了（比如图片缓存，或者是js由于某些原因被阻塞了），那么onload就不会执行
反之，js同步执行确定onload赋值完成后才会赋值src,可以保证这个异步过程在onload赋值完成后才开始进行，也就保证了onload一定会被执行到

https://segmentfault.com/q/10...