Loading Image Dynamically

Question

I have to display lots of Image of different size in a single page.

<div id="box1">
 <span>Something About Image Goes Here</span>
 <img src="img1.jpg" id="img1" />
</div>
<div id="box2">
 <span>Something About Image Goes Here</span>
 <img src="img2.jpg" id="img2" />
</div>
---
---
<div id="box30">
 <span>Something About Image Goes Here</span>
 <img src="img30.jpg" id="img30" />
</div>

my page will take much time to load completely if i use such code, so i want that all images should not load at once only Images within viewport (visible part of web page) should be loaded first and rest should load when user scrolls to them.

Note
I dont want it for text (image info i used in code), text should appear normally at once.
As in facebook when user scroll down it loads new content but here i want only for images, i am using a decorated div and when user scroll down corresponding image must appear in that div. (i wants to add a loading image also till the pic loads completely)

Jonathan Leech-Pepin · Accepted Answer · 2013-06-05 13:28:32Z

5

You can use jQuery lazyload plugin for that.

Lazy Load is a jQuery plugin written in JavaScript. 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.

edited Jun 5, 2013 at 13:28

Jonathan Leech-Pepin

7,8842 gold badges31 silver badges45 bronze badges

answered Jun 5, 2013 at 13:25

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abar Choudhary Over a year ago

yes dear, you understand my problem well, i m reading lazyload that u tagged

silentw Over a year ago

If you are referencing lazyload plugin, I'd suggest you have a look at this plugin, based on lazyload but with support for retina-ready images. Unveil.js

Collectives™ on Stack Overflow

Loading Image Dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related