CODEWITHSUNDEEP
javascriptjquery
Jake Wilson
Jake Wilson

Reputation: 91213

jQuery lazy loading image with throttling?

I've been given a design for a commercial affiliate-related website where the homepage has 2500+ images on it. Two directions I'm thinking about to ease the loading of the images is to utilize a lazy image loading script.

I've been messing with the jQuery JAIL (Async Image Loader) script. I have it set so that it loads all the visible images when the page loads. Then after a couple seconds it begins downloading all the rest of the images on the page that are below the fold. This is typically like 2400+ images.

The problem is that when the browser is told to download 2400 images it basically freezes up, or at least freezes up the scrollbar until it's done.

Are there any jQuery image loading scripts that are similar to the JAIL but that allow for some type of throttling? Anything really to help from freezing up the page.

I'm also looking into css sprites but for various technical reasons and time constraints it might not be feasible.

Upvotes: 1

Views: 1537

Answers (2)

jzila
jzila

Reputation: 735

If the images are small, you might consider combining them into fewer large images and loading them all at once, displaying them all as <div> elements with their background image set. Example:

http://jsfiddle.net/XXRwD/

Upvotes: 0

kvc
kvc

Reputation: 1137

Use this jQuery plugin. Example here It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Upvotes: 4

Related Questions