Jason Mayo
Jason Mayo

Reputation: 356

jQuery - How to stop image loading unless requested

Is it possible to stop images from loading, until requested via jQuery?

I'm currently using jQuery Waypoints, and would like to only load images in to the document once at that certain location...

This goes for images in an IMG tag, and also Background Images?

Upvotes: 1

Views: 302

Answers (2)

Pavel Podlipensky
Pavel Podlipensky

Reputation: 8269

You can simply create images without any tags, so browser will have nothing to load. And then force browser to load the images when needed. Checkout this tutorial of how to load images on demand

Upvotes: 0

Alnitak
Alnitak

Reputation: 339917

Any time an <img> tag is created, or an Image object has its .src property set, it'll start trying to load.

The only way that I know to do what you want is to ensure that the element isn't created until it's actually needed.

If you know how big the images are, you could use a 1x1 place holder scaled up to the right size, and then replace the place holder's .src with the correct image when you need it. That should at least keep your page layout stable and avoid reflows.

Upvotes: 3

Related Questions