Запустить обратный вызов, если / когда изображение загружено

Question

Я хочу знать, является ли надежным способом просмотра свойства height изображение, если оно уже загружено.

Допустим, у меня есть ссылка на изображение, например:

var img = document.getElementById('myImg');

Если я хочу запустить какой-то код, основанный на загружаемом изображении, я могу поместить его в обратный вызов и запустить img.onload = myCallback;.

Но если изображение уже загружено до запуска этого кода, обратный вызов не будет выполнен.

Это одно из возможных решений:

if (img.height && img.height > 0) {
    myCallback();
}
else {
    img.onload = myCallback;
}

Другими словами: запустите myCallback сейчас, если изображение уже загружено, в противном случае дождитесь его загрузки.

Но я чувствую, что этот код может быть хрупким ... Будет ли он работать во всех случаях? Есть ли более безопасный или более элегантный способ сделать это?

Answer 1

Вы ищете complete свойство.Тем не менее, я не думаю, что это работает надежно во всех версиях Firefox, поэтому хорошо добавить проверку высоты в качестве резервной копии:

if (img.complete) {
    myCallback();
} else if (img.height && img.height > 0) {
    myCallback();
} else {
    img.onload = myCallback;
}