CODEWITHSUNDEEP
javascriptjqueryajaxlazy-loading
Abar Choudhary
Abar Choudhary

Reputation: 202

Loading Image Dynamically

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)

Upvotes: 3

Views: 732

Answers (1)

PSR
PSR

Reputation: 40318

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.

Upvotes: 5

Related Questions