new Image(), как узнать, загружено ли изображение на 100% или нет?

Question

Я создаю новое изображение, используя

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

Затем я назначаю img.src для src тега img в DOM

$("#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
})