Stop Loading Of Images With Javascript (lazyload)?

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: $(docum

Solution 1:

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.

Solution 2:

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:

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

Solution 3:

I think the problem is that you are emptying the 'img' attribute, not the 'src'.

If you are testing this on a local page, then your local images may be loading too fast. Or maybe they are taken directly from browser cache. Try checking if the image is already loaded before emptying its 'src'.

Solution 4:

$(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.

Solution 5:

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', '');
  });
});