Stop loading of images with javascript (lazyload)?

Question

Hello! 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

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

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 5

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

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