Prevent images from loading.

Question

Hello,
is there a way with javascript/jquery to prevent images from loading? I am building a slideshow from a html list with images. So I would like to collect all the src data and then prevent the images from loading. So later when the user really needs the image I would load it then.

I found some lazy loading script on google but couldn't find the way they prevent images from loading.

Thanks in advance.

Edit1:
It seems from the answers that it's not possible to use javascript to prevent images from loading. Here is a script that does lazy loading. Could anybody explain how it works? It seems when javascript is off it just loads the images normaly and when it's on it will load them when you scroll to their location.

Answer 1

Store the URLs somewhere else, then set all image URLs to some dummy image (empty, transparent, "loading data...", whatever). When an image should be displayed, use JS to set the src attribute and the browser will fetch it.

Answer 2

If you render the HTML on the page, even if it's hidden, it's going to load. If you want images to load only when they're needed, you're going to have to dynamically set the source (src) on the image tag in javascript.

Edit 1: The script you referenced merely checks to see how far you've scrolled the page down and then determines which images are visible (or almost visible) by checking their top -- see the $.belowthefold and $.rightoffold extensions.

The example works great when the images are all the same size, because their containers can also be the same size and you won't get any odd page resizing behavior when you lazy load them. If you images' heights and widths vary, you may get some odd results.

Edit 2:

http://home.langdonx.com:8000/demos/js/prevent%5Floading.html

<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />

Answer 3

Just do not include the img tag in your original HTML, generate it on the fly using DHTML as you need it. You can also put a fake url to image in the img tag and replace it with the real one dynamically.

On the side note - what's the point. All you are trying to do here is to build another caching mechanism over the existing one. Leave caching to browsers, they are pretty good at this

Answer 4

You can use the portion below to replace all image tags with a dummy file (for example, an 1x1 transparent gif). The url's are stored in a array for later reference.

$(document).ready(function(){
    var images = new Array();
    $("img").each(function(i){
   images[i] =  this.src;
    this.src='blank.gif';
    });
});

Answer 5

Well with Prototype you can do something like this I guess:

var unloaded = [];
$$('img.noload').each(function (image) {
 unloaded.push(image);
 image._src = image.src;
 image.src = '';
});

To load all of them:

unloaded.each(function (image) {
 image.src = image._src;
});

To load the first one:

function loadImage (image) {
 image.src = image._src;
}

loadImage(unloaded.shift());

Well I hope you got the idea.

Answer 6

I don't recommend this solution, for many reasons (like it ruins your page if you don't have Javascript enabled, screen-readers etc), but its a possibility...

You could change the IMG tag so that it hijacks a different attribute, like ALT (LONGDESC, or TITLE too):

Then use Javascript to update the SRC attribute with the ALT value as you need to.

So thats one way, and not a good one. I think the only real approach is to dynamically generate the proper IMG tag as needed via Javascript and not publish it with the HTML (this too has implications for non-JS browsers etc)