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

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

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

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

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

Как узнать, что img.src загружен на 100%? Какова наилучшая практика? img.complete Мне кажется, что в некоторых браузерах мало ошибок.

Итак, другими словами, мне нужно назначить img.src на $("#my_img") только после img, он был загружен на 100%.

Спасибо!

Ответ 1

Используйте событие load:

img = new Image();

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

img.src = image_url;

Также посмотрите:

Предварительная загрузка и объект JavaScript Image()

Ответ 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
})