Wie kann ich mithilfe von Javascript / jQuery feststellen, ob ein Bild geladen wurde?

Ich schreibe etwas Javascript, um die Größe des großen Bildes so zu ändern, dass es in das Browserfenster des Benutzers passt. (Ich kontrolliere leider nicht die Größe der Quellbilder.)

So etwas wäre also im HTML:

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Kann ich feststellen, ob das srcBild in einem imgTag heruntergeladen wurde?

Ich brauche das, weil ich auf ein Problem stoße, wenn $(document).ready()es ausgeführt wird, bevor der Browser das Bild geladen hat. $("#photo").width()und $("#photo").height()gibt die Größe des Platzhalters (den Alternativtext) zurück. In meinem Fall ist das ungefähr 134 x 20.

Im Moment überprüfe ich nur, ob die Höhe des Fotos weniger als 150 beträgt, und gehe davon aus, dass es sich in diesem Fall nur um Alternativtext handelt. Dies ist jedoch ein ziemlicher Hack, und es würde brechen, wenn ein Foto weniger als 150 Pixel hoch ist (in meinem speziellen Fall nicht wahrscheinlich) oder wenn der Alternativtext mehr als 150 Pixel hoch ist (möglicherweise in einem kleinen Browserfenster). .

Bearbeiten: Für alle, die den Code sehen möchten:

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Update : Danke für die Vorschläge. Es besteht die Gefahr, dass das Ereignis nicht ausgelöst wird, wenn ich einen Rückruf für das $("#photo").loadEreignis festlege. Daher habe ich ein onLoad-Ereignis direkt auf dem Image-Tag definiert. Für die Aufzeichnung ist hier der Code, mit dem ich am Ende gegangen bin:

<img id="photo"
     onload="photoLoaded();"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Dann in Javascript:

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Fügen Sie entweder einen Ereignis-Listener hinzu oder lassen Sie das Bild sich beim Laden anmelden. Dann finden Sie die Abmessungen von dort heraus.

<img id="photo"
     onload='loaded(this.id)'
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Mit dem jquery-Datenspeicher können Sie einen 'geladenen' Status definieren.

<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />

Dann können Sie anderswo tun:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

Die richtige Antwort ist die Verwendung von event.special.load

Es ist möglich, dass das Ladeereignis nicht ausgelöst wird, wenn das Bild aus dem Browser-Cache geladen wird. Um diese Möglichkeit zu berücksichtigen, können wir ein spezielles Ladeereignis verwenden, das sofort ausgelöst wird, wenn das Image bereit ist. event.special.load ist derzeit als Plugin verfügbar.

Gemäß den Dokumenten auf .load ()

Sie möchten das tun, was Allain gesagt hat. Beachten Sie jedoch, dass das Image manchmal geladen wird, bevor dom ready ist. Dies bedeutet, dass Ihr Load-Handler nicht ausgelöst wird. Der beste Weg ist, wie Allain sagt, aber den src des Bildes mit Javascript zu setzen, nachdem Sie den Load Hander angebracht haben. Auf diese Weise können Sie sicherstellen, dass es ausgelöst wird.

Funktioniert Ihre Website in Bezug auf die Barrierefreiheit weiterhin für Personen ohne Javascript? Möglicherweise möchten Sie dem img-Tag den richtigen src zuweisen, Ihren dom ready-Handler anhängen, um Ihr js auszuführen: Löschen Sie den Bild-src (geben Sie ihm eine feste Höhe und Höhe mit css, um das Flackern der Seite zu verhindern) und stellen Sie dann Ihren img-Ladehandler ein. Setzen Sie dann den Quellcode auf die richtige Datei zurück. Auf diese Weise decken Sie alle Basen ab :)

Gemäß einem der letzten Kommentare zu Ihrer ursprünglichen Frage

$(function() {

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()  {
    if (!$("#photo").get(0).complete) {
       $("#photo").load(function() {
          adjust_photo_size();
       });
    } else {
      ... 
    }
});

Warnung Diese Antwort kann zu einer schwerwiegenden Schleife in ie8 und niedriger führen, da img.complete vom Browser nicht immer richtig eingestellt wird. Wenn Sie ie8 unterstützen müssen, verwenden Sie ein Flag, um sich daran zu erinnern, dass das Bild geladen ist.

Versuchen Sie etwas wie:

$("#photo").load(function() {
    alert("Hello from Image");
});

Es gibt ein jQuery-Plugin namens "imagesLoaded", das eine browserübergreifende Methode bietet, um zu überprüfen, ob die Bilder eines Elements geladen wurden.

Seite? ˅: https://github.com/desandro/imagesloaded/

Verwendung für einen Container mit vielen Bildern:

$('container').imagesLoaded(function(){
 console.log("I loaded!");
})

Das Plugin ist großartig:

1. funktioniert zum Überprüfen eines Containers mit vielen Bildern
2. Funktioniert, um ein IMG zu überprüfen, um festzustellen, ob es geladen wurde

Irgendwelche Kommentare zu diesem?

...

doShow = function(){
  if($('#img_id').attr('complete')){
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()',100);
  }
};

$('#img_id').attr('src','image.jpg');

doShow();

...

Scheint überall zu funktionieren ...

Ich habe gerade eine jQuery-Funktion erstellt, um ein Bild mit jQuerys Deferred Object zu laden , wodurch es sehr einfach ist, auf Lade- / Fehlerereignisse zu reagieren:

$.fn.extend({
    loadImg: function(url, timeout) {
        // init deferred object
        var defer = $.Deferred(),
            $img = this,
            img = $img.get(0),
            timer = null;

        // define load and error events BEFORE setting the src
        // otherwise IE might fire the event before listening to it
        $img.load(function(e) {
            var that = this;
            // defer this check in order to let IE catch the right image size
            window.setTimeout(function() {
                // make sure the width and height are > 0
                ((that.width > 0 && that.height > 0) ? 
                    defer.resolveWith : 
                    defer.rejectWith)($img);
            }, 1);
        }).error(function(e) {
            defer.rejectWith($img);
        });

        // start loading the image
        img.src = url;

        // check if it's already in the cache
        if (img.complete) {
            defer.resolveWith($img);
        } else if (0 !== timeout) {
            // add a timeout, by default 15 seconds
            timer = window.setTimeout(function() {
                defer.rejectWith($img);
            }, timeout || 15000);
        }

        // return the promise of the deferred object
        return defer.promise().always(function() {
            // stop the timeout timer
            window.clearTimeout(timer);
            timer = null;
            // unbind the load and error event
            this.off("load error");
        });
    }
});

Verwendung:

var image = $('<img />').loadImg('http://www.google.com/intl/en_com/images/srpr/logo3w.png')
.done(function() {
    alert('image loaded');
    $('body').append(this);
}).fail(function(){
    alert('image failed');
});

Siehe es funktioniert unter: http://jsfiddle.net/roberkules/AdWZj/

Diese Funktion prüft anhand messbarer Abmessungen, ob ein Bild geladen wird. Diese Technik ist nützlich, wenn Ihr Skript ausgeführt wird, nachdem einige der Bilder bereits geladen wurden.

imageLoaded = function(node) {
    var w = 'undefined' != typeof node.clientWidth ? node.clientWidth : node.offsetWidth;
    var h = 'undefined' != typeof node.clientHeight ? node.clientHeight : node.offsetHeight;
    return w+h > 0 ? true : false;
};

Ich fand das funktionierte für mich

document.querySelector("img").addEventListener("load", function() { alert('onload!'); });

Der Kredit geht insgesamt an Frank Schwieterman, der die akzeptierte Antwort kommentierte. Ich musste das hier setzen, es ist zu wertvoll ...

Wir haben eine Seite entwickelt, auf der eine Reihe von Bildern geladen wurden, und andere Funktionen erst ausgeführt, nachdem das Bild geladen wurde. Es war eine geschäftige Site, die viel Verkehr erzeugte. Es scheint, dass das folgende einfache Skript in praktisch allen Browsern funktioniert hat:

$(elem).onload = function() {
    doSomething();
}

ABER DAS IST EIN POTENZIELLES PROBLEM FÜR IE9!

Der EINZIGE Browser, in dem wir Probleme gemeldet hatten, ist IE9. Sind wir nicht überrascht? Es scheint, dass der beste Weg, um das Problem zu lösen, darin besteht, dem Bild erst dann einen src zuzuweisen, wenn die Onload-Funktion wie folgt definiert wurde:

$(elem).onload = function() {
    doSomething();
}
$(elem).attr('src','theimage.png');

Es scheint, dass IE 9 manchmal nicht werfen wird onload Ereignis aus irgendeinem Grund . Andere Lösungen auf dieser Seite (wie zum Beispiel die von Evan Carroll) funktionierten immer noch nicht. Dies überprüfte logischerweise, ob der Ladezustand bereits erfolgreich war und löste die Funktion aus, und wenn dies nicht der Fall war, stellte der Onload-Handler ein, aber selbst wenn Sie dies tun, haben wir beim Testen gezeigt, dass das Bild dadurch zwischen diesen beiden Zeilen von js geladen werden kann erscheint nicht in die erste Zeile geladen und wird dann geladen, bevor der Onload-Handler gesetzt wird.

Wir haben festgestellt, dass der beste Weg, um das zu bekommen, was Sie wollen, darin besteht, den src des Bildes erst zu definieren, wenn Sie den onloadEreignisauslöser gesetzt haben.

Wir haben erst kürzlich die Unterstützung von IE8 eingestellt, daher kann ich nicht für Versionen vor IE9 sprechen, ansonsten nicht für alle anderen Browser, die auf der Website verwendet wurden - IE10 und 11 sowie Firefox, Chrome, Opera, Safari und was auch immer Benutzer von mobilen Browsern verwendeten - das Einstellen srcvor dem Zuweisen des onloadHandlers war nicht einmal ein Problem.

Darf ich insgesamt eine reine CSS-Lösung vorschlagen?

Haben Sie einfach eine Div, in der Sie das Bild anzeigen möchten. Legen Sie das Bild als Hintergrund fest. Dann haben Sie die Eigenschaft background-size: coveroder background-size: containje nachdem, wie Sie es wollen.

coverschneidet das Bild zu, bis kleinere Seiten die Box bedecken. containbehält das gesamte Bild im div bei und hinterlässt Leerzeichen an den Seiten.

Überprüfen Sie das Snippet unten.

div {
  height: 300px;
  width: 300px;
  border: 3px dashed grey;
  background-position: center;
  background-repeat: no-repeat;
}

.cover-image {
  background-size: cover;
}

.contain-image {
  background-size: contain;
}

<div class="cover-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>
<br/>
<div class="contain-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>

Ich finde, dass diese einfache Lösung am besten für mich funktioniert:

        function setEqualHeight(a, b) {
            if (!$(a).height()) {
                return window.setTimeout(function(){ setEqualHeight(a, b); }, 1000);
            }
            $(b).height($(a).height());
        }

        $(document).ready(function() {
            setEqualHeight('#image', '#description');
            $(window).resize(function(){setEqualHeight('#image', '#description')});
        });
    </script>