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:

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

This doesn't work (tested in ff3.5, safari 3-4). The images is getting loaded anyway, i dont get it.

For example this plugin, www.appelsiini.net/projects/lazyload, is doing the exact same thing, removing the src attribute on page load.

What am i missing?

EDIT: I added a test page here: http://dev.bolmaster2.com/dev/lazyload-test/ I first remove the src attribute completely, then after 5 seconds I add it with the original image. Still doesn't work, at least firebug says the images get loaded at start, is firebug to trust?

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

Answer 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:

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

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

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

Answer 6

I think your problem is you're running the code within $(document).ready, which is called when the document is ready - ie. when it is fully loaded, including the images. The LazyLoad plugin you linked to doesn't use $(document).ready, and the script is placed in the header, so it runs before/while the page loads rather than afterwards.

Answer 7

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 8

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

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

Answer 9

I had the same problem when putting the image load on the hover event on my thumbnail image, in IE it causes a "Stack Overflow" when I hover on the thumbnail image.
But it is solved now. This code saved my day:

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