html5 - 一个javascript加载图片的问题

问题描述

问 题

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

回调函数版：
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为什么都要写在最后，写在为图片对象绑定回调函数那句代码之前可不可以呢

解决方案

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

这篇关于html5 - 一个javascript加载图片的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！