Hình ảnh mới(), làm cách nào để biết hình ảnh có tải 100% hay không?

Question

tôi là tạo ra hình ảnh mới sử dụng

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

Sau đó, tôi đang gán img.src để src thẻ img trong DOM

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

Làm thế nào tôi có thể biết rằng img.src có 100% tải ? Thực hành tốt nhất là gì? img.complete dường như với tôi ít lỗi trong một số trình duyệt.

Vì vậy, nói cách khác, tôi cần chỉ định img.src đến $("#my_img") chỉ sau img nó đã được tải 100%.

Cảm ơn bạn!

Answer 1

Sử dụng các sự kiện load:

img = new Image(); 

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

img.src = image_url; 

Cũng có một cái nhìn tại địa chỉ:

• Preloading and the JavaScript Image() object

Answer 2

Sử dụng mô hình 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 
     }) 
    } 

Và khi gọi hàm, chúng tôi có thể xử lý phản hồi hoặc lỗi của nó khá gọn gàng.

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