新的Image(),如何知道图像是否100%加载？

Question

我正在使用创建新图像

img = new Image();
img.src = image_url;

然后我将img.src分配给DOM中的img标签的src

$("#my_img").attr("src", img.src);

我怎么知道img.src已经100%加载？什么是最佳做法？ img.complete对我来说在某些浏览器中看起来很小.

所以,换句话说,我需要分配img.src到$("#my_img")后才img被加载100%.

谢谢!

Answer 1

使用load活动:

img = new Image();

img.onload = function(){
  // image  has been loaded
};

img.src = image_url;

另外看看:

• 预加载和JavaScript Image()对象

Answer 2

使用Promise模式:

function getImage(url){
        return new Promise(function(resolve, reject){
            var img = new Image()
            img.onload = function(){
                resolve(url)
            }
            img.onerror = function(){
                reject(url)
            }
            img.src = url
        })
    }

在调用函数时,我们可以非常巧妙地处理它的响应或错误.

getImage('imgUrl').then(function(successUrl){
    //do stufff
}).catch(function(errorUrl){
    //do stuff
})