Sprawdź, czy obraz nie jest załadowany (bez błędów) za pomocą jQuery

Używam JavaScript z biblioteką jQuery do manipulowania miniaturami obrazów zawartymi na nieuporządkowanej liście. Po załadowaniu obrazu robi jedną rzecz, a gdy pojawia się błąd, robi coś innego. Używam jQuery load()i error()metod jako zdarzeń. Po tych zdarzeniach sprawdzam element DOM obrazu dla .complete, aby upewnić się, że obraz nie został już załadowany, zanim jQuery nie będzie mogło zarejestrować zdarzeń.

Działa poprawnie, chyba że wystąpi błąd, zanim jQuery może zarejestrować zdarzenia. Jedyne rozwiązanie, jakie mogę wymyślić, to użyć onerroratrybutu img do przechowywania „flagi” gdzieś globalnie (lub w węźle, który jest sam), który mówi, że się nie udało, więc jQuery może sprawdzić ten „sklep / węzeł” podczas sprawdzania .complete.

Czy ktoś ma lepsze rozwiązanie?

Edycja: Pogrubione główne punkty i dodatkowe szczegóły poniżej: Sprawdzam, czy obraz jest kompletny (aka załadowany) PO dodaniu do obrazu zdarzenia obciążenia i błędu. W ten sposób, jeśli obraz zostanie załadowany przed zarejestrowaniem zdarzeń, nadal będę wiedział. Jeśli obraz nie zostanie załadowany po zdarzeniach, wydarzenia się nim zajmą. Problem polega na tym, że mogę łatwo sprawdzić, czy obraz jest już załadowany, ale nie wiem, czy zamiast tego wystąpił błąd.

Inną opcją jest wyzwolenie zdarzeń onloadi / lub onerrorzdarzeń poprzez utworzenie elementu obrazu w pamięci i ustawienie jego srcatrybutu na oryginalny srcatrybut oryginalnego obrazu. Oto przykład tego, co mam na myśli:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

Mam nadzieję że to pomoże!

Sprawdź completei naturalWidthwłaściwości w tej kolejności.

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

W oparciu o moją wiedzę na temat specyfikacji HTML W3C dla tego imgelementu , powinieneś być w stanie to zrobić za pomocą kombinacji atrybutów completei naturalHeight, na przykład:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

Ze specyfikacji dla completeatrybutu:

Kompletny atrybut IDL musi zwracać wartość true, jeśli spełniony jest jeden z następujących warunków:

• Atrybut src został pominięty.
• Ostatnie zadanie umieszczone w kolejce przez źródło zadań sieciowych po pobraniu zasobu zostało umieszczone w kolejce.
• Element img jest całkowicie dostępny.
• Element img jest uszkodzony.

W przeciwnym razie atrybut musi zwracać wartość false.

Zasadniczo completezwraca wartość true, jeśli obraz zakończył ładowanie lub ładowanie się nie powiodło. Ponieważ chcemy tylko przypadku, w którym obraz został pomyślnie załadowany, musimy również sprawdzić nauturalHeightatrybut:

IDL atrybuty naturalWidthi naturalHeightmusi wrócić wewnętrzną szerokość i wysokość obrazu w pikselach CSS, jeżeli obraz jest dostępny, albo 0.

I availablejest tak zdefiniowane:

Img jest zawsze w jednym z następujących stanów:

• Niedostępny - agent użytkownika nie uzyskał żadnych danych obrazu.
• Częściowo dostępne - agent użytkownika uzyskał niektóre dane obrazu.
• Całkowicie dostępne - agent użytkownika uzyskał wszystkie dane obrazu i dostępne są przynajmniej wymiary obrazu.
• Zepsuty - klient użytkownika uzyskał wszystkie dane obrazu, które może, ale nie może nawet zdekodować obrazu wystarczająco, aby uzyskać wymiary obrazu (np. Obraz jest uszkodzony, format nie jest obsługiwany lub nie można uzyskać danych) .

Kiedy element img jest w stanie częściowo dostępnym lub całkowicie dostępnym, mówi się, że jest dostępny.

Więc jeśli obraz jest „uszkodzony” (nie udało się załadować), to będzie w stanie uszkodzonym, a nie w stanie dostępnym, więc naturalHeightbędzie wynosił 0.

Dlatego sprawdzenie imgElement.complete && imgElement.naturalHeight !== 0powinno nam powiedzieć, czy obraz został pomyślnie załadowany.

Możesz przeczytać więcej na ten temat w specyfikacji HTML W3C dla tego imgelementu lub w MDN .

Próbowałem na wiele różnych sposobów i ten sposób był dla mnie jedynym

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

Możesz także dodać funkcję wywołania zwrotnego uruchamianą, gdy wszystkie obrazy zostaną załadowane do DOM i gotowe. Dotyczy to również dynamicznie dodawanych obrazów. http://jsfiddle.net/kalmarsh80/nrAPk/

Użyj imagesLoadedbiblioteki javascript .

Można go używać ze zwykłym JavaScript i jako wtyczką jQuery.

Cechy:

• oficjalnie wspierany przez IE8 +
• licencja: MIT
• zależności: brak
• waga (zminimalizowana i zgzipowana): zminimalizowana 7kb (lekka!)

Zasoby

• Projekt na github: https://github.com/desandro/imagesloaded
• Oficjalna strona internetowa: http://imagesloaded.desandro.com/
• /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imagesloaded javascript library: co to jest przeglądarka i urządzenie?

Pobierz informacje z elementów obrazu na stronie
Testuj działanie na Chrome i Firefox
Działający jsFiddle (otwórz konsolę, aby zobaczyć wynik)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

Uwaga: Użyłem jQuery , myślałem, że może to być skuteczne przy pełnym javascript

Znajduję tutaj dobre informacje OpenClassRoom -> to francuskie forum

Detektor sieci w czasie rzeczywistym - sprawdź stan sieci bez odświeżania strony: (to nie jest jquery, ale przetestowane, i działa w 100%: (testowane w przeglądarce Firefox v25.0)

Kod:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

w przypadku utraty połączenia wystarczy nacisnąć przycisk Ponownie.

Aktualizacja 1: Automatyczne wykrywanie bez odświeżania strony:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

Po przeczytaniu interesujących rozwiązań na tej stronie, stworzyłem łatwe w użyciu rozwiązanie, na które duży wpływ ma post SLaksa i Noyo, który wydaje się działać na całkiem nowych wersjach (w momencie pisania) Chrome, IE, Firefox, Safari i Opera (wszystkie w systemie Windows). Ponadto działał na emulatorze iPhone / iPad, którego użyłem.

Jedną z głównych różnic między tym rozwiązaniem a SLaksem i postem Noyo jest to, że to rozwiązanie sprawdza głównie właściwości naturalWidth i naturalHeight. Przekonałem się, że w obecnych wersjach przeglądarki te dwie właściwości wydają się zapewniać najbardziej pomocne i spójne wyniki.

Ten kod zwraca PRAWDA, gdy obraz został w pełni załadowany ORAZ pomyślnie. Zwraca FAŁSZ, gdy obraz nie został jeszcze w pełni załadowany LUB LUB nie udało się załadować.

Jedną z rzeczy, o których musisz wiedzieć, jest to, że ta funkcja zwróci również FAŁSZ, jeśli obraz ma rozmiar piksela 0x0. Ale te obrazy są dość rzadkie i nie mogę wymyślić bardzo przydatnego przypadku, w którym chciałbyś sprawdzić, czy załadowano jeszcze obraz piksela 0x0 :)

Najpierw dołączamy nową funkcję o nazwie „isLoaded” do prototypu HTMLImageElement, dzięki czemu można jej użyć w dowolnym elemencie obrazu.

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

Następnie, za każdym razem, gdy musimy sprawdzić status ładowania obrazu, wywołujemy funkcję „isLoaded”.

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

Według komentarza giorgiana do postów SLaks i Noyo, to rozwiązanie prawdopodobnie może być użyte jako jednorazowa kontrola w Safari Mobile, jeśli planujesz zmienić atrybut SRC. Można jednak obejść ten problem, tworząc element obrazu z nowym atrybutem SRC zamiast zmieniać atrybut SRC na istniejącym elemencie obrazu.

Oto jak dostałem go do pracy w różnych przeglądarkach, używając kombinacji powyższych metod (musiałem także dynamicznie wstawiać obrazy do domeny):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

Uwaga: Musisz podać poprawny stan logiczny dla zmiennej isIE.

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// Lub jako wtyczka

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

Jak rozumiem, właściwość .complete jest niestandardowa. To może nie być uniwersalne ... Widzę, że wydaje się działać inaczej w wersetach Firefox IE. Ładuję kilka obrazów do javascript, a następnie sprawdzam, czy są kompletne. W Firefoksie wydaje się, że działa to świetnie. W IE nie dzieje się tak, ponieważ obrazy wydają się ładować w innym wątku. Działa tylko wtedy, gdy opóźnię moje zadanie do image.src i sprawdzę właściwość image.complete.

Użycie image.onload i image.onerror też nie działa, ponieważ muszę przekazać parametr, aby wiedzieć, o którym obrazku mówię, kiedy funkcja jest wywoływana. Jakikolwiek sposób robienia tego wydaje się zawodzić, ponieważ wydaje się, że faktycznie spełnia tę samą funkcję, a nie różne wystąpienia tej samej funkcji. Tak więc wartość, którą przekazuję, aby zidentyfikować obraz, zawsze jest ostatnią wartością w pętli. Nie mogę wymyślić żadnego sposobu na obejście tego problemu.

W Safari i Chrome widzę image.complete true i naturalWidth ustawione, nawet gdy konsola błędów pokazuje 404 dla tego obrazu ... i celowo usunąłem ten obraz, aby to przetestować. Ale powyższe działa dobrze dla Firefox i IE.

Ten fragment kodu pomógł mi naprawić problemy z buforowaniem przeglądarki:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

Gdy pamięć podręczna przeglądarki jest wyłączona, tylko ten kod nie działa:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

aby działało, musisz dodać:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

Za pomocą tego JavaScriptkodu możesz sprawdzić, czy obraz został pomyślnie załadowany, czy nie.

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

Wypróbuj to

Miałem wiele problemów z pełnym ładowaniem obrazu i EventListener.

Cokolwiek próbowałem, wyniki nie były wiarygodne.

Ale potem znalazłem rozwiązanie. Technicznie nie jest to przyjemne, ale teraz nigdy nie miałem nieudanego ładowania obrazu.

Co ja zrobiłem:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

Zamiast wczytywać obraz za jednym razem, ładuję go po raz drugi bezpośrednio za pierwszym razem i oba uruchamiam w module obsługi zdarzeń.

Wszystkie moje bóle głowy zniknęły!

Nawiasem mówiąc: Wy z stackoverflow pomogliście mi już ponad sto razy. Za to bardzo dziękuję!

Ten działał dla mnie dobrze :)

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});