Überprüfen Sie, ob ein Bild geladen wird (keine Fehler) in JavaScript

stimmen
185

Ich verwende JavaScript mit der Bibliothek jQuery Bild Thumbnails in einer ungeordneten Liste enthalten ist, zu manipulieren. Wenn das Bild geladen ist es ist eine Sache, wenn ein Fehler es etwas anderes tut auftritt. Ich bin mit jQuery load () und Fehler () -Methoden als Ereignisse. Nach diesen Ereignissen prüfe ich das Bild DOM - Element für das Das Gesamt das Bild , um sicherzustellen , schon wurde nicht geladen , bevor jQuery die Ereignisse registrieren konnte.

Es funktioniert richtig , außer wenn ein Fehler auftritt , bevor jQuery die Ereignisse registrieren. Die einzige Lösung , die ich denken kann, ist das img zu verwenden onerror irgendwo global eine „Flagge“ speichern Attribut (oder auf dem Knoten ist es selbst) , die sagt , es versäumt , dies kann jQuery überprüfen, ob „store / node“ , wenn Das Gesamt überprüfen.

Wer eine bessere Lösung?

Edit: Bolded wichtigste Punkte und zusätzliche Extra Detail unten: Ich überprüfe , ob ein Bild abgeschlossen ist (aka geladen) , nachdem ich eine Last und Fehlerereignis auf dem Bild hinzufügen. Auf diese Weise, wenn das Bild geladen wurde , bevor die Ereignisse registriert wurden, werde ich noch wissen. Wenn das Bild nicht nach den Ereignissen geladen wird , dann werden die Ereignisse darum kümmern , wenn es funktioniert. Das Problem dabei ist, kann ich einfach überprüfen , ob bereits ein Bild geladen ist, aber ich kann nicht sagen , ob ein Fehler aufgetreten ist, statt.

Veröffentlicht am 29/12/2009 um 23:58
quelle vom benutzer
In anderen Sprachen...                            


15 antworten

stimmen
191

Überprüfen Sie die completeund naturalWidthEigenschaften, die in dieser Reihenfolge.

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;
}
Beantwortet am 30/12/2009 um 00:05
quelle vom benutzer

stimmen
220

Eine weitere Option ist die zum Auslösen onloadund / oder onerrorEreignisse , die von einer in dem Speicherbildelement zu schaffen und seine Umgebung srcAttributs zu dem ursprünglichen srcAttribute des Originalbildes. Hier ist ein Beispiel dafür , was ich meine:

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

Hoffe das hilft!

Beantwortet am 30/12/2009 um 00:59
quelle vom benutzer

stimmen
1

Wie ich die Die Gesamt Eigenschaft ist nicht-Standard verstehen. Es kann nicht universell sein ... Ich merke, es scheint anders in Firefox Verse IE zu arbeiten. Ich bin eine Reihe von Bildern in Javascript Laden dann, wenn eine vollständige Überprüfung. In Firefox, scheint dies zu funktionieren groß. In IE, es funktioniert nicht, weil die Bilder auf einem anderen Thread zu laden erscheinen. Es funktioniert nur, wenn ich eine Verzögerung zwischen meiner Aufgabe gestellt image.src und wenn ich die image.complete Eigenschaft überprüfen.

Mit image.onload und image.onerror arbeitet nicht für mich, entweder, weil ich einen Parameter übergeben muß, um zu wissen, welches Bild ich rede, wenn die Funktion aufgerufen wird. Jede Art und Weise, dies zu tun scheint zu scheitern, weil es scheint, tatsächlich die gleiche Funktion zu übergeben, nicht unterschiedliche Instanzen derselben Funktion. So ist der Wert, den ich in ihn passieren zu identifizieren, um das Bild immer endet als der letzte Wert in der Schleife. Ich kann mich keinen Weg, um dieses Problem.

Auf Safari und Chrome, ich sehe die image.complete wahr und die naturalWidth gesetzt, auch wenn die Fehler-Konsole 404 für das Bild zeigt ... und ich entfernt absichtlich das Bild um dies zu testen. Aber die oben genannten Arbeiten auch für Firefox und IE.

Beantwortet am 28/10/2011 um 14:31
quelle vom benutzer

stimmen
2

Das ist, wie ich es Cross-Browser zu arbeiten, über eine Kombination der Verfahren (I auch Bilder benötigen dynamisch in das dom einfügen):

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

Hinweis: Sie müssen einen gültigen Booleschen Zustand für die ISIE Variable liefern.

Beantwortet am 30/03/2013 um 17:01
quelle vom benutzer

stimmen
14

Ich habe versucht, viele verschiedene Möglichkeiten, und auf diese Weise ist die einzige für mich gearbeitet

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

Sie könnten auch eine Callback - Funktion ausgelöst hinzufügen , sobald alle Bilder im DOM und fertig geladen werden. Dies gilt für Bilder auch dynamisch hinzugefügt. http://jsfiddle.net/kalmarsh80/nrAPk/

Beantwortet am 31/07/2013 um 00:15
quelle vom benutzer

stimmen
3

Echtzeit - Netzwerk - Detektor - überprüft Netzwerk - Status , ohne die Seite zu aktualisieren: (es ist nicht Jquery, aber getestet und 100% funktioniert: (getestet auf Firefox v25.0))

Code:

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

wenn die Verbindung verloren drücken Sie einfach die Taste erneut.

Update 1: Automatische Erkennung ohne die Seite zu aktualisieren:

<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>
Beantwortet am 16/10/2013 um 13:46
quelle vom benutzer

stimmen
11

Verwenden Sie imagesLoadedJavaScript - Bibliothek .

Verwendbar mit einfachen Javascript und als jQuery-Plugin.

Eigenschaften:

Ressourcen

Beantwortet am 13/11/2013 um 14:58
quelle vom benutzer

stimmen
2

die interessanten Lösungen auf dieser Seite nach der Lektüre habe ich eine einfach zu bedienende Lösung stark von SLaks' und Noyo der Post beeinflusste, die Arbeit an ziemlich neuere Versionen (ab Schreiben) von Chrome, IE, Firefox, Safari zu sein scheint, und Opera (alle auf Windows). Außerdem arbeitete sie auf einem iPhone / iPad-Emulator I verwendet.

Ein wesentlicher Unterschied zwischen dieser Lösung und SLaks und Noyo des Beitrag ist, dass diese Lösung vor allem überprüft die naturalWidth und naturalHeight Eigenschaften. Ich habe, dass in den aktuellen Browser-Versionen zu finden, diese beiden Eigenschaften die nützlichsten und konsistente Ergebnisse zu liefern scheinen.

Dieser Code gibt TRUE zurück, wenn hat ein Bild vollständig und erfolgreich geladen. Es gibt FALSE zurück, wenn ein Bild entweder noch nicht vollständig geladen hat oder nicht hat zu laden.

Eine Sache, die Sie benötigen, um sich bewusst sein, dass diese Funktion auch FALSE zurückgeben, wenn das Bild ein Bild 0x0 Pixel. Aber diese Bilder sind sehr selten, und ich kann nicht glauben, von einem sehr nützlichen Fall, dass Sie würde überprüfen, um zu sehen, ob ein 0x0 Pixel-Bild noch geladen ist :)

Zuerst legen wir eine neue Funktion „isLoaded“ den HTMLImageElement Prototyp genannt, so dass die Funktion auf jedem Bildelement verwendet werden kann.

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;

};

Dann müssen wir jederzeit den Ladezustand des Bildes überprüfen, rufen wir einfach die „isLoaded“ -Funktion.

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

Per Kommentar des giorgian auf SLaks' und Noyo der Post, diese Lösung wahrscheinlich nur als eine einmalige Überprüfung auf Mobile Safari verwendet werden, wenn Sie auf die Veränderung der SRC-Attribut planen. Sie können jedoch durch die Schaffung eines Bildelements mit einem neuen SRC das umgehen Attribut anstelle der Änderung des SRC-Attribut auf einem vorhandenen Bildelement.

Beantwortet am 28/07/2015 um 16:53
quelle vom benutzer

stimmen
0

Diese Verwendung von JavaScriptCode können Sie die Bild überprüfen erfolgreich geladen ist oder nicht.

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

Probieren Sie diese

Beantwortet am 04/12/2015 um 09:53
quelle vom benutzer

stimmen
42

Basierend auf meinem Verständnis von der W3C HTML - Spezifikation für das imgElement , sollten Sie in der Lage sein , dies zu tun , um eine Kombination aus der Verwendung completeund naturalHeightAttribute, etwa so:

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

Von der Spezifikation für das completeAttribut:

Die IDL-Attribut komplett muss true zurückgeben, wenn eine der folgenden Bedingungen erfüllt ist:

  • Das src-Attribut wird weggelassen.
  • Die letzte Aufgabe, die von der Netzwerkquelle Aufgabe Warteschlange gestellt wird, sobald die Ressource wurde eine Warteschlange eingereiht wurde, geholt.
  • Das img-Element ist vollständig verfügbar.
  • Das img Element gebrochen ist.

Andernfalls muss das Attribut false zurück.

So im Wesentlichen, completegibt true zurück , wenn das Bild entweder fertig geladen hat, oder nicht geladen. Da wollen wir nur den Fall, dass das Bild erfolgreich geladen müssen wir das überprüfen nauturalHeightals auch Attribut:

Die IDL - Attribute naturalWidthund naturalHeightmuss die intrinsische Breite und Höhe des Bildes, in CSS Pixel zurückzukehren, wenn das Bild vorhanden ist, sonst 0 ist .

Und availableist wie so definiert:

Ein img ist immer in einem der folgenden Zustände:

  • Nicht verfügbar - Das Benutzerprogramm, alle Bilddaten nicht erhalten werden .
  • Teilweise verfügbar - Der User - Agent hat einige der Bilddaten erhalten.
  • Vollständig verfügbar - Das Benutzerprogramm hat alle der Bilddaten und zumindest die Bildabmessungen verfügbar sind , erhalten.
  • Gebrochen - Der User - Agent hat alle Bilddaten erhält , die es kann, aber es kann das Bild genug , um die Bildabmessungen nicht einmal dekodieren (zB wird das Bild beschädigt, oder das Format nicht unterstützt wird , oder keine Daten erhalten werden können) .

Wenn ein img Element entweder in dem teilweise verfügbar Zustand oder in vollständig verfügbaren Zustand befindet, wird gesagt, zur Verfügung steht.

Also , wenn das Bild „gebrochen“ ist (nicht geladen), dann wird es im gebrochenen Zustand sein, nicht der verfügbare Zustand, so naturalHeightwird 0 sein.

Daher Überprüfung imgElement.complete && imgElement.naturalHeight !== 0sollte uns sagen , ob das Bild erfolgreich geladen wird.

Sie können mehr über diese in lesen W3C HTML - Spezifikation für das imgElement , oder auf MDN .

Beantwortet am 11/01/2016 um 14:49
quelle vom benutzer

stimmen
3

Abrufen Informationen aus Bildelementen auf der Seite
Test - Arbeit an Chrome und Firefox
Arbeits jsFiddle (öffnen Sie Ihre Konsole um das Ergebnis zu sehen)

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

});

Hinweis: Ich habe jQuery , dachte ich , das auf volle Javascript acheive sein kann

Ich finde hier gute Informationen OpenClassRoom -> das ist ein Französisch - Forum

Beantwortet am 19/04/2016 um 23:52
quelle vom benutzer

stimmen
0

Ich hatte eine Menge Probleme mit der kompletten Ladung eines Bildes und dem Eventlistener.

Was auch immer ich versuchte, waren die Ergebnisse nicht zuverlässig.

Aber dann fand ich die Lösung. Es ist technisch nicht nett, aber jetzt hatte ich nie ein ausgefallenes Bild Last.

Was ich getan habe:

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

Anstatt das Bild einmal geladen, ich nur ein zweites Mal nach dem ersten Mal direkten Laden und laufen beide Trog die Eventhandler.

Alle meine Kopfschmerzen sind weg!


Durch die Art und Weise: Sie Jungs von Stackoverflow half mir schon mehr als hundertmal. Dazu wird ein sehr großes Danke!

Beantwortet am 27/02/2017 um 04:36
quelle vom benutzer

stimmen
0

Dieser Code-Schnipsel hat mir geholfen, die Browser-Caching-Probleme zu beheben:

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

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

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

Wenn der Browser-Cache deaktiviert ist, wird nur dieser Code nicht funktioniert:

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

um es arbeiten Sie hinzufügen:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});
Beantwortet am 15/12/2017 um 10:52
quelle vom benutzer

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

// oder als Plugin

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

// $(".myImage").isLoaded() 
Beantwortet am 25/03/2018 um 07:09
quelle vom benutzer

stimmen
0

Dieses funktionierte gut für mich :)

$('.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');
});
Beantwortet am 27/07/2019 um 11:52
quelle vom benutzer

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