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

RemoveAttr("src") versuchen; wie in http://www.appelsiini.net/projects/lazyload

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

Wenn es immer noch nicht funktioniert. Überprüfen Sie this.loaded - vielleicht werden sie zu schnell geladen.

Answer 2

Wenn Ihr Ziel ist es zu verhindern, dass der Server das Laden der Bilder, dann Löschen der "src"-Attribut wird nicht funktionieren, wenn Sie in document.ready (zumindest nicht immer - versuchen Sie das Herunterladen von pinterest's html zum Beispiel und fügen Sie Ihr Skript auf die gespeicherte html - Sie werden sehen, dass der Browser wird die Bilder vom Server anfordern vor die src wird gelöscht).

Stattdessen können Sie versuchen, den gleichen Code zu verwenden (oder besser, ohne jQuery, um sicherzustellen, dass es so schnell wie möglich läuft), indem Sie es in den "head"-Abschnitt innerhalb einer setInterval-Schleife, die das "src"-Attribut von allen Bildern löschen wird, sobald die Tags vorhanden sind (bevor jQuery document ready gefeuert wird).

Ejemplo:

Entfernen Sie die Bilder ohne jQuery:

function removeImagesBeforeTheyAreRequested(options) {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) { 
    var orgSrc = images[i].src;
    images[i].removeAttribute('src'); 
  }
}

Feuern Sie diesen Code im "head"-Abschnitt ab, bevor der "body" fertig ist (im Grunde überwachen Sie das Vorhandensein von img-Tags):

var timer = setInterval(function() {
   removeImagesBeforeTheyAreRequested();
}, 1);

nach 3 Sekunden aufhören, nach Bildern zu suchen:

setTimeout(function() { clearInterval(timer); }, 3000);

Beachten Sie, dass Sie prüfen sollten, ob Bilder im Cache gespeichert sind, bevor Sie ihr "src"-Attribut entfernen (diese würden vom Browser sehr schnell geladen werden, und es macht keinen Sinn, ihr "src" zu entfernen, um den Server zu entlasten, da sie nicht erneut vom Server angefordert werden).

Answer 3

Ich glaube, das Problem ist, dass Sie das Attribut "img" leeren, nicht das Attribut "src".

Wenn Sie dies auf einer lokalen Seite testen, werden Ihre lokalen Bilder möglicherweise zu schnell geladen. Oder sie werden direkt aus dem Browser-Cache geholt. Versuchen Sie zu prüfen, ob das Bild bereits geladen ist, bevor Sie sein "src" leeren.

Answer 4

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

Das wird nicht funktionieren, weil jQuery erst aufgerufen wird, nachdem die Seite geladen wurde:

$(document).ready()

Dieser Code würde lediglich den src-Wert entfernen, nachdem das Bild bereits vom Server abgerufen wurde.

Answer 5

Ich weiß nicht, ob Sie in der Frage falsch geschrieben haben, aber das Attribut, das Sie auf eine leere Zeichenkette setzen sollten, ist "src" und nicht "img". Versuchen Sie dies:

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