jQuery .load() Callback-Funktion feuert mehrmals

Question

das erste Mal, wenn der Code ausgeführt wird es produziert richtig:
Last komplette

aber das 2. Mal, es produziert:
Last komplette
Last komplette

die 3nd Zeit produziert:
Last komplette
Last komplette
Last komplette

etc ... also das 20. Mal, wenn die Ladefunktion abgeschlossen ist, wird die Rückruffunktion 20 mal ausgelöst.

$('#image-tag').load(function() { 
     console.log("load complete"); 
    }); 
}).attr('src', 'image.jpg').appendTo('#main'); 

eine Idee, was bewirkt, dass die Rückruffunktion so wiederholt/erhöht wird?

Answer 1

Das liegt daran, dass Sie jedes Mal, wenn Sie diesen Code ausführen, einen weiteren Ereignishandler hinzufügen.

Wenn Sie ein Bild-Tag an ein Element anhängen möchten, sollten Sie kein Bild verwenden, das bereits auf der Seite ist. Erstellen Sie einen neuen Image-Tag statt:

$('<img/>').load(function() { 
    console.log("load complete"); 
}).attr('src', 'image.jpg').appendTo('#main'); 

Answer 2

Es woulds wie Sie diese in einem Klick-Handler oder etwas anderes anrufen, das ein jedes Mal neue.load() Handler bindet. Entweder binden die .load() einmal, oder verwenden Sie .one(), wie folgt aus:

$('#image-tag').one('load', function() { 
    console.log("load complete"); 
});