新的Image()，如何知道图片是否已经完全加载？

Question

我正在使用以下代码创建新图像：

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

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

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

我怎么知道img.src已经100％加载了？最佳实践是什么？ 在某些浏览器中，img.complete 看起来有点不太正常。 换句话说，我需要在图像100％加载后才将img.src 分配给 $("#my_img")。 谢谢！

- Kirzilla

---

你还可以为img.complete添加一个检查，看看img.naturalWidth是否存在。请参见https://dev59.com/FnI-5IYBdhLWcg3wMFQf。 - fadomire

Answer 1

使用 load 事件：

img = new Image();

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

img.src = image_url;

还可以看看：

• 预加载和JavaScript Image()对象

- Sarfraz

---

这个解决方案是否跨浏览器？ - Kirzilla

@Kirzilla：我认为是的，你应该试一试 :) - Sarfraz

我认为仅当图像实际重新加载时才会触发onload。如果图像被缓存，那么onload将不会被触发。有人可以确认吗？ - Andy Swift

我能否使用上述图像对象找到文件的MIME类型？ - Saravanan

有人知道吗：img 何时发出 HTTP 请求？是在更改 img.src 时吗？ - Weishi Z

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
})

- Watchmaker

---

这是我个人认为更好的解决方案。如果 OP 正在使用标记为 jQuery 的话，他可以执行 $.when.apply($, [])，其中 "[]" 是一个承诺数组（即支持多个图像）。值得注意的是原生承诺也支持此功能。 - AndFisher

太棒了的回答！ - SuperStar518

优美的答案。 - EliT

很好的解决方案，但我建议使用(successUrl) => { //do stufff }).catch((errorUrl) => { //do stuff })（基本上使用(param) =>而不是function(param)，因为这样如果你需要在promise内部使用this，你仍然有原始引用） - Heichou