nowy obraz(), jak sprawdzić, czy obraz jest w 100% załadowany czy nie?

Question

Tworzę nowy obraz używając

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

wtedy jestem przypisywania img.src do src tagu img w DOM

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

Skąd mogę wiedzieć, że img.src posiada 100% naładowaną ? Jaka jest najlepsza praktyka? img.complete wydaje mi się mały buggy w niektórych przeglądarkach.

Więc, innymi słowy, muszę przypisać img.src do $("#my_img") dopiero po img został załadowany w 100%.

Dziękujemy!

Answer 1

Użyj zdarzenie load:

img = new Image(); 

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

img.src = image_url; 

mają również do obejrzenia:

• Preloading and the JavaScript Image() object

Answer 2

Stosując wzór obietnicy

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

A wywołując tę ​​funkcję, możemy całkiem dobrze radzić sobie z jej odpowiedzią lub błędem.

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