Stop loading of images with javascript (lazyload)?

Question

I am trying to stop the loading of images with javascript on dom ready and then init the loading whenever i want, a so called lazy loading of images. Something like this:

Answer 1

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

This won't work because jQuery is being called after the page has loaded at:

$(document).ready()

all this code would be doing is removing the src value after the image has already been called from the server.

Answer 2

I'd suggest using the Jquery Lazyload plug-in for this. It does exactly what you want.

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

Answer 3

I don't know if you have written wrong in the question but the attribute the you should set to an empty string is "src" not "img". Try this:

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

Answer 4

With JavaScript you do it like this.

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

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

Consider using Vanilla Javascript first.

Answer 5

If your goal is to prevent the server from loading the images, then clearing the "src" attribute will not work when you run in at document.ready (at least not always - try downloading pinterest's html for example and addy your script to the saved html - you will see that the browser will request the images from the server before the src is cleared).

Instead you can try to use the same code (or better, without jQuery, to make sure it runs as fast as possible) by putting it in the "head" section inside a setInterval loop that will clear the "src" attribute from all images as soon as the tags are present (before jQuery document ready is fired).

Example:

remove the images without 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'); 
  }
}

fire this code in the "head" section, before the body is ready (basically monitor the existence of img tags):

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

quit trying to look for images after 3 seconds:

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

Note that you might want to check if images are cached before removing their "src" attribute (those would be loaded by the browser really fast and there's no point in removing their "src" for the purpose of removing load from the server as they are not requested from the server again).

Answer 6

try removeAttr("src"); as in http://www.appelsiini.net/projects/lazyload

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

If it still is not working. Check this.loaded - maybe they are loaded too fast.