Jakie są rozwiązania dla właściwości `complete` w FireFox?

Question

Próbuję użyć jQuery, aby określić, czy obraz został poprawnie załadowany.

Poniższe działa dobrze (i zwraca true lub false jako stanu obrazu), ale wydaje się tylko do pracy w IE, w FireFox, wydaje się zawsze zwraca true - nawet jeśli stan jest rzeczywiście niekompletne:

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

Jaki jest odpowiednik Firefox dla image.complete w JavaScript lub jQuery?

Answer 1

nie wiem, czy Firefox ma inny rekwizyt, metoda, która to robi, ale można korzystać z tego rozwiązania:

$ (document) .ready (function() {

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

});

Answer 2

Można też spróbować sprawdzając jeden z wymiarów elementu oprócz img do complete:

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

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

    return true; 
} 

nieobciążonym img lub img z nieprawidłowym atrybutem src powinien mieć .height() i .width() równą 0 w Firefox. W Chrome i Opera żadna z metod nie działa poprawnie. W tych przeglądarkach zawsze zwracałem wartość dodatnią w moich testach.

Answer 3

Można użyć load(), ale uwaga Internet Explorer: To nie będzie ognia zdarzenie, jeżeli obraz jest buforowane

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!"); 
    }); 
} 

Answer 4

Tak właśnie działa na stronie AJAX, który dynamicznie załadowanego obrazów . Chciałem również wykryć, czy obrazy zostały załadowane, więc mogłem je przenieść z efektem 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 

Zamiast więc musiałem to zrobić ...

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

(Uwaga: nie testowałem dokładnie ten kod, to uproszczona wersja tego, co starałem się zrobić, ale Mam nadzieję, że komunikujemy pomysł.)

Simon.

Answer 5

Jquery sprawia, że ​​to naprawdę proste.

Wystarczy użyć funkcji .load(), aby powiązać zdarzenie z czasem pełnego załadowania obrazu.

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

Answer 6

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. 

Answer 7

W moim przypadku, należy użyć metody

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

i funkcji dealJob używam document.images [ 'XXX']. Kompletne, aby sprawdzić obraz, ale zawsze zwraca true.

Podczas zmiany użyć metody

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

oraz w zależności dealJob, wynik document.images [ 'XXX']. Pełna jest poprawne.

Może to ci pomoże.