Wie man jQuery live() für img onload Ereignis verwenden?

Question

Ich möchte einen Code ausführen, wenn ein Bild geladen wird. Außerdem möchte ich es unauffällig tun (nicht inline). Genauer gesagt, ich möchte jQuery's verwenden live() Funktion, damit dies für alle dynamisch geladenen Bilder geschieht.

Ich habe es versucht:

<img class="content_image" alt="" src="..." />
<script>
    $('.content_image').live('load', function() {
      alert('loaded!');
    });
</script>

Zusätzlich zu load Ich habe versucht onload y onLoad . Wenn ich es durch "Klick" ersetze, funktioniert alles wie erwartet, so dass ich weiß, dass es sich nicht um einen störenden Fehler handelt.

Ich habe keine Liste der verfügbaren Ereignistypen für den live() Funktion, so dass es nach allem, was ich weiß, nicht möglich sein könnte.

Answer 1

(Es wäre load , nicht onload o onLoad .)

load nicht blubbert (laut der img Eintrag in der HTML5-Spezifikation ist es ein "einfaches Ereignis" die nicht sprudeln), also kann man sie nicht mit live o delegate die darauf beruhen, dass das Ereignis von einem Element auf seine(n) Vorgängerelement(e) überspringt.

Sie müssen den Haken an den einzelnen img Elemente (und tun dies vor Sie stellen ihre src da man sie sonst übersehen kann; und denken Sie immer daran, nach error auch). (Ja, man kann es wirklich übersehen: Die Browser ist nicht single-threaded, nur der JavaScript-Hauptthread. Wenn Sie src und das Bild befindet sich im Cache oder wird früh genug verfügbar, kann der Browser das Ereignis auslösen. Die Art und Weise, wie Ereignisse ausgelöst werden, besteht darin, dass der Browser nachschaut, welche Handler zum Zeitpunkt des Auslösens des Ereignisses registriert sind, und diese in eine Warteschlange stellt, um aufgerufen zu werden, wenn der JavaScript-Hauptthread an den Browser zurückgegeben wird. Wenn keine Handler registriert sind, werden sie nicht in die Warteschlange gestellt, und Sie erhalten nie den Rückruf).

Answer 2

Es ist ein bisschen schmutzig, aber es funktioniert:

<script type="text/javascript">
    var loop = setInterval(function() {

           // the img to watch
           var $img = $("img.hi");

           if( !!$img.length && $img[0].complete ) {
               // clear the timer
               clearInterval(loop);

               alert("loaded !");

           }

    }, 30);        
</script>

<img class="hi" src="http://www.google.fr/images/nav_logo72.png" />

Answer 3

Endlich bin ich über dieses jQuery Plugin gestolpert: https://github.com/desandro/imagesloaded