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

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).