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, http://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

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