Какие обходные пути существуют для свойства `complete` в FireFox?

Я пытаюсь использовать jQuery, чтобы определить, правильно ли загружено изображение.

Следующее работает просто отлично (и возвращает true или false как состояние изображения), но, похоже, работает только в IE, в FireFox он всегда возвращает true - даже если состояние на самом деле неполное:

    var image = $("img#myImage");
    alert(image[0].complete);

Что такое эквивалент Firefox для image.complete в JavaScript или jQuery?

Ответ 1

Вы также можете попробовать проверить один из размеров элемента img в дополнение к complete:

function isImageLoaded() {
    var theImage = $('#myImage'); 

    if (!theImage.get(0).complete) {
        return false;
    }
    else if (theImage.height() === 0) {
        return false;
    }

    return true;
}

Разгруженный img или img с недопустимым атрибутом src должен иметь .height() и .width() равный 0 в Firefox. В Chrome и Opera ни один из методов не работает должным образом. В этих браузерах theImage.height() всегда возвращал положительное значение в моем тестировании.

Ответ 2

JQuery делает это очень простым.

Вы можете просто использовать функцию .load() для привязки события к времени, когда изображение полностью загружено.

    $("img").load(function() {
        // Yeay, it was loaded, and works in all browsers!
    });

Ответ 3

Вы можете использовать load(), но будьте осторожны с Internet Explorer: он не будет запускать событие, если изображение кэшируется

if($img[0].readyState === 4){ // image is cached in IE
    alert("Image loaded!");
}else{
    $img.load(function(){ // for other browsers and IE, if not cached
        alert("Image loaded!");
    });
}

Ответ 4

Да, я просто работал на странице AJAX с динамически загружаемыми изображениями. Я также хотел определить, были ли загружены изображения, чтобы я мог их переместить с эффектом jQuery.

img = $('myImageID')
img[0].src = 'http://new.url.for.image/';
alert(img[0].complete);                    // seems to always return true
                                           // in Firefox, perhaps because
                                           // the original src had been loaded

Поэтому вместо этого я должен был сделать это...

img = $('myImageID')
newImg = $('<img>')                // create a completely new IMG element
          .attr('src', 'http://new.url.for.image/')
          .attr('id', img[0].id);
img.replaceWith(newImg);
img = newImg;
alert(img[0].complete);

(Примечание: я не тестировал этот точный код, это упрощенная версия того, что я пытался сделать, но, надеюсь, общается с этой идеей.)

Саймон.

Ответ 5

myimage=new Image();
myimage.src="whatever";
if(myimage.height>0 && myimage.complete){alert("my image has loaded");}

// might be overly simple but works for me in all browsers i think.

Ответ 6

Я не знаю, имеет ли firefox другой prop, метод, который делает это, но вы можете использовать это обходное решение:

$(документ).ready(функция() {

$("img").each(
//for each image declared in html
function(index)
{
    document.images[index].complete= false;
    document.images[index].onload = function(){ this.complete= true};
});

});

Ответ 7

В моем случае я использую метод

document.images['XXX'].addEventListener('load', dealJob(), false);

и в функции dealJob я использую document.images ['XXX']. complete для проверки изображения, но он всегда возвращает true.

Когда я перехожу к использованию метода

document.images['XXX'].onload = function() {dealJob();}

а в функции dealJob результат document.images ['XXX'] завершен правильно.

Может быть, это может вам помочь.