Das Laden von Bildern mit Javascript stoppen (Lazyload)?

Question

Ich versuche, das Laden von Bildern mit Javascript auf dom bereit zu stoppen und dann initiieren das Laden, wann immer ich will, eine so genannte Lazy Loading von Bildern. Etwas wie dieses:

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});

Das funktioniert nicht (getestet in ff3.5, safari 3-4). Die Bilder werden trotzdem geladen, ich verstehe es nicht.

Dieses Plugin, www.appelsiini.net/projects/lazyload, macht zum Beispiel genau das Gleiche und entfernt das src-Attribut beim Laden der Seite.

Was übersehe ich?

EDIT: Ich habe hier eine Testseite hinzugefügt: http://dev.bolmaster2.com/dev/lazyload-test/ Zuerst entferne ich das src-Attribut vollständig, dann füge ich es nach 5 Sekunden mit dem Originalbild hinzu. Funktioniert immer noch nicht, zumindest Firebug sagt, dass die Bilder beim Start geladen werden, ist Firebug zu vertrauen?

Answer 1

Ich denke, Ihr Problem ist, dass Sie den Code innerhalb von $(document).ready ausführen, der aufgerufen wird, wenn das Dokument bereit ist - d. h. wenn es vollständig geladen ist, einschließlich der Bilder. Das LazyLoad-Plugin, das Sie verlinkt haben, verwendet $(document).ready nicht, und das Skript ist in der Kopfzeile platziert, so dass es vor/während die Seite geladen wird und nicht danach ausgeführt wird.

Answer 2

Ich würde vorschlagen, dafür das Jquery Lazyload Plug-in zu verwenden. Es macht genau das, was Sie wollen.

http://www.appelsiini.net/projects/lazyload

Answer 3

Ich hatte das gleiche Problem, wenn ich das Bild laden auf dem Hover-Ereignis auf meinem Thumbnail-Bild, im IE verursacht es einen "Stack Overflow", wenn ich auf dem Thumbnail-Bild schweben.
Aber das Problem ist jetzt gelöst. Dieser Code hat mir den Tag gerettet:

$(document).ready(function() {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

Answer 4

Mit JavaScript machen Sie das so.

var imagesArray = document.querySelectorAll('img');

for(var i=0; i<imagesArray.length; i++) {
    imagesArray[i].src = '';
}

Erwägen Sie, zunächst Vanilla Javascript zu verwenden.