Sjekk om et bilde er lastet (ingen feil) i Javascript

stemmer
188

Jeg bruker Javascript med jQuery biblioteket for å manipulere miniatyrbilder som finnes i en sorterte liste. Når bildet er lastet den gjør en ting, når det oppstår en feil den gjør noe annet. Jeg bruker jQuery belastning () og feiling () metoder som hendelser. Etter disse hendelsene jeg sjekke bildet DOM element for .complete å sørge for at bildet ble ikke allerede lastet før jQuery kan registrere hendelsene.

Det fungerer på riktig måte, bortsett fra når det oppstår en feil før jQuery kan registrere hendelser. Den eneste løsningen jeg kan tenke på er å bruke img onerror attributt å lagre en flagg sted globalt (eller på noden det selv) som sier at det sviktet så jQuery kan sjekke at store / node når du sjekker .complete.

Alle som har en bedre løsning?

Edit: uthevet hovedpunkter og lagt ekstra detalj nedenfor: Jeg sjekker om et bilde er ferdig (aka lastet) etter at jeg legger en belastning og feil hendelse på bildet. På den måten, hvis bildet ble lastet inn før hendelsene ble registrert, vil jeg fortsatt vet. Hvis bildet ikke er lastet etter hendelsene da hendelsene vil ta vare på den når den gjør det. Problemet med dette er at jeg enkelt kan sjekke om et bilde er lastet allerede, men jeg kan ikke si om det oppstod en feil i stedet.

Publisert på 29/12/2009 klokken 22:58
kilden bruker
På andre språk...                            


15 svar

stemmer
198

Kontroller completeog naturalWidthegenskaper, i den rekkefølgen.

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;
}
Svarte 29/12/2009 kl. 23:05
kilden bruker

stemmer
222

Et annet alternativ er å utløse onloadog / eller onerrorhendelser ved hjelp av et minne i bildeelement, og å sette dens srcegenskap til den opprinnelige srcegenskap av det opprinnelige bildet. Her er et eksempel på hva jeg mener:

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

Håper dette hjelper!

Svarte 29/12/2009 kl. 23:59
kilden bruker

stemmer
1

Som jeg forstår .complete er røyk standard. Det kan ikke være universell ... Jeg merker det synes å fungere annerledes i Firefox vers IE. Jeg legger i et antall bilder i javascript deretter sjekke om fullført. I Firefox, synes dette å fungere bra. I IE, gjør det ikke fordi bildene ser ut til å være lasting på en annen tråd. Det fungerer bare hvis jeg sette en forsinkelse mellom min oppgave å image.src og når jeg sjekke image.complete eiendom.

Bruke image.onload og image.onerror fungerer ikke for meg heller, fordi jeg trenger å passere en parameter for å vite hvilket bilde jeg snakker om når funksjonen kalles. Noen måte å gjøre det ser ut til å mislykkes fordi det faktisk ser ut til å passere samme funksjon, ikke ulike forekomster av samme funksjon. Slik at verdien jeg passerer inn i det å identifisere bildet alltid ender opp med å bli den siste verdien i loop. Jeg kan ikke tenke på noen måte rundt dette problemet.

På Safari og Chrome, ser jeg image.complete sant og naturalWidth satt selv når feilen konsollen viser en 404 for det bildet ... og jeg med vilje fjernet det bildet for å teste dette. Men de ovennevnte fungerer godt for Firefox og IE.

Svarte 28/10/2011 kl. 13:31
kilden bruker

stemmer
2

Dette er hvordan jeg fikk det til å fungere kryss leseren ved hjelp av en kombinasjon av metodene ovenfor (jeg trengte også å sette inn bilder dynamisk i dom):

$('#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');
    }
});

Merk: Du må oppgi en gyldig boolsk tilstand for isIE variabel.

Svarte 30/03/2013 kl. 16:01
kilden bruker

stemmer
16

Jeg prøvde mange forskjellige måter, og på denne måten er den eneste som fungerte for meg

//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');
});

Du kan også legge til en tilbakeringingsfunksjonen utløses når alle bildene er lagt i DOM og klar. Dette gjelder for dynamisk lagt bilder også. http://jsfiddle.net/kalmarsh80/nrAPk/

Svarte 30/07/2013 kl. 23:15
kilden bruker

stemmer
3

Realtime nettverk detektor - sjekk nettverksstatus uten å oppdatere siden: (det er ikke jquery, men testet, og 100% fungerer: (testet på Firefox v25.0))

Kode:

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

Hvis tilkoblingen tapte bare trykk på igjen-knappen.

Oppdater 1: Auto oppdage uten å oppdatere siden:

<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>
Svarte 16/10/2013 kl. 12:46
kilden bruker

stemmer
11

Bruk imagesLoadedjavascript bibliotek .

Kan brukes med vanlig Javascript og som en jQuery plugin.

Egenskaper:

ressurser

Svarte 13/11/2013 kl. 13:58
kilden bruker

stemmer
2

Etter å ha lest interessante løsninger på denne siden, opprettet jeg en lett-å-bruke løsning sterkt påvirket av SLaks' og Noyo innlegg som ser ut til å være i arbeid på ganske nyere versjoner (som i skrivende stund) av Chrome, IE, Firefox, Safari og Opera (alle på Windows). Også det fungerte på en iPhone / iPad emulator jeg brukte.

En stor forskjell mellom denne løsningen og SLaks og Noyo innlegg er at denne løsningen sjekker hovedsakelig naturalWidth og naturalHeight egenskaper. Jeg har funnet ut at i dagens nettleserversjoner, disse to egenskapene synes å gi de mest nyttige og konsistente resultater.

Denne koden returnerer SANN når et bilde er lastet fullt og vellykket. Den returnerer FALSE når et bilde enten har ikke lastet fullt ennå, eller har unnlatt å laste.

En ting du må være klar over er at denne funksjonen vil også returnere FALSE hvis bildet er en 0x0 piksel bilde. Men disse bildene er ganske uvanlig, og jeg kan ikke tenke på en veldig nyttig sak der du ønsker å sjekke for å se om en 0x0 piksel bilde har lastet ennå :)

Først legger vi en ny funksjon kalt "isLoaded" til HTMLImageElement prototype, slik at funksjonen kan brukes på alle bildeelement.

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;

};

Deretter, når som helst vi trenger for å sjekke lasting status av bildet, vi bare kaller "isLoaded" -funksjonen.

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

Per giorgian kommentar på SLaks' og Noyo innlegg, denne løsningen trolig kan bare brukes som en engangs sjekk på Safari Mobile hvis du har planer om å endre SRC-attributtet. Men du kan omgå det ved å opprette et bildeelement med en ny SRC attributt i stedet for å endre SRC-attributtet på en eksisterende bildeelement.

Svarte 28/07/2015 kl. 16:53
kilden bruker

stemmer
0

Ved hjelp av denne JavaScriptkoden kan du sjekke bildet er lastet eller ikke.

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

Prøv dette

Svarte 04/12/2015 kl. 09:53
kilden bruker

stemmer
47

Basert på min forståelse av W3C HTML-spesifikasjon for imgelement , bør du være i stand til å gjøre dette ved hjelp av en kombinasjon av den completeog naturalHeightattributter, som så:

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

Fra spec for completeattributt:

IDL attributtet komplett må returnere true hvis en av følgende betingelser er oppfylt:

  • Den src attributt er utelatt.
  • Den siste oppgave som stilles i kø av det nettverk oppgave kilde Når ressursen har blitt hentet står i kø.
  • Den img element er fullstendig tilgjengelig.
  • Den img element er brutt.

Ellers må attributtet return false.

Så egentlig, completereturnerer true hvis bildet har enten ferdig lastet, eller kunne ikke lastes. Siden vi ønsker bare tilfelle der bildet lastet vi må sjekke nauturalHeightattributt i tillegg:

IDL attributter naturalWidthog naturalHeightmå returnere den indre bredden og høyden av bildet, i CSS piksler, dersom bildet er tilgjengelig, eller ellers 0.

Og availableer definert slik:

En img er alltid i en av følgende tilstander:

  • Utilgjengelig - Brukeren agent har ikke fått noen bildedata.
  • Delvis tilgjengelig - Brukeren agent har oppnådd noen av de bildedata.
  • Fullstendig tilgjengelig - Brukeren agent har oppnådd alle de bildedata og i det minste bildet dimensjoner er tilgjengelige.
  • Broken - Brukeren agent har oppnådd alle de bildedata som kan det, men det kan ikke engang dekode bildet nok til å få bildet dimensjoner (f.eks bildet blir ødelagt, eller formatet er ikke støttet, eller ingen data kunne oppnås) .

Når et img element er enten i den delvis tilgjengelige form eller i fullstendig tilgjengelig tilstand, sies det å være tilgjengelig.

Så hvis bildet er "ødelagt" (kunne ikke lastes), så vil det være i den ødelagte tilstand, ikke er tilgjengelig staten, så naturalHeightvil være 0.

Derfor kontroll imgElement.complete && imgElement.naturalHeight !== 0bør fortelle oss om bildet har lastet.

Du kan lese mer om dette i W3C HTML-spesifikasjon for imgelement , eller på MDN .

Svarte 11/01/2016 kl. 14:49
kilden bruker

stemmer
3

Hente informasjon fra bildeelementer på siden
Test jobber med Chrome og Firefox
Working jsFiddle (åpne konsollen for å se resultatet)

$('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);

});

Merk: Jeg brukte jQuery , jeg tenkte at dette kan være oppnå på full javascript

Jeg finner god informasjon her OpenClassRoom -> dette er en fransk forum

Svarte 19/04/2016 kl. 23:52
kilden bruker

stemmer
0

Jeg hadde mye problemer med den fullstendige belastningen av et bilde og EventListener.

Uansett hva jeg prøvde, resultatene var ikke pålitelig.

Men så fant jeg løsningen. Det er teknisk sett ikke en fin en, men nå har jeg aldri hatt en mislykket bilde belastning.

Hva jeg gjorde:

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

I stedet for å laste bildet en gang, jeg bare laste det en gang direkte etter første gang, og både kjøre gjennom den Event.

Alle mine hodepine er borte!


Forresten: Dere fra Stackoverflow hjalp meg allerede mer enn hundre ganger. For dette er en veldig stor takk!

Svarte 27/02/2017 kl. 04:36
kilden bruker

stemmer
0

Dette kodebit hjulpet meg å fikse nettleser caching problemer:

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

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

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

Når nettleseren cache er deaktivert, men denne koden ikke virker:

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

å gjøre det arbeidet du har å legge til:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});
Svarte 15/12/2017 kl. 10:52
kilden bruker

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

// Eller som en plugin

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

// $(".myImage").isLoaded() 
Svarte 25/03/2018 kl. 07:09
kilden bruker

stemmer
0

Dette fungerte fint for meg :)

$('.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');
});
Svarte 27/07/2019 kl. 11:52
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more