新形象（），如何知道圖像100％加載與否？

Question

我創建使用新的圖像

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

然後我指定img.src到img標籤的src在DOM

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

我怎麼能知道img.src有100％的負載？最佳做法是什麼？ img.complete在我看來，在某些瀏覽器中有點小錯誤。

因此，換句話說，我需要在img之後才能分配img.src到$("#my_img")它是100％加載的。

謝謝！

Answer 1

使用load事件：

img = new Image(); 

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

img.src = image_url; 

也看看：

• Preloading and the JavaScript Image() object

Answer 2

使用無極模式：

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