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

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 2

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 3

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");
  });
});