lazy load of images using jquery

Question

our site has few pages where many images shown. over the slow internet page load long time to load fully along with images. i search google for having jquery solution which will download image on demand when user scroll down the page. i found a jquery library called lazyload the url is http://www.appelsiini.net/projects/lazyload

this plugin is good but my page content along with images populated from database. database content is inserted from a html editor. i read the lazyload and found that

1) <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" >

image src will has different images and actual image path will be written to data-original property which is not possible for my page because i said that my page content is developed by html editor. so i need help that how to customize the library as a result my image tag will be as is like normal image tag like <img class="lazy" src="img/example.jpg" > but it still work. if it is not possible by this library then suggest me any other libary which will download only those images which are in browser viewport. i am trying to say that my image tag will be <img class="lazy" src="img/example.jpg" > but library will download only those images which are in browser viewport. please help. or give me any sample code by which few images will downloaded and rest will download when user scroll down. thanks.

You can try to find an old release of lazyload (v 1.5.0). This version works without data attributes. — sofl
– sofl, Commented Jun 13, 2012 at 13:39
i found that we have to give the same data-original attribute in version of lazyload (v 1.5.0). as a proof jontai.me/blog/2012/04/lazy-loading-images-on-a-wordpress-blog github.com/p0is0n/jquery.lazyload any suggestion?? — Thomas
– Thomas, Commented Jun 13, 2012 at 13:53
the problem is i can not change my markup....need suggestion. thanks — Thomas
– Thomas, Commented Jun 13, 2012 at 13:53
At the first link, there is a example how you can upgrade 1.5 to 1.7. At the second link you should take a look at the test.html, where you can see no data attributes at the image tags — sofl
– sofl, Commented Jun 13, 2012 at 13:59
i notice actual image url is tagged with title attribute....title="t3.gstatic.com/…" my problem is i can not change my html. i can not add title attribute to my image tag. please need suggestion. — Thomas
– Thomas, Commented Jun 13, 2012 at 14:06

mhyassin · Accepted Answer · 2016-07-12 18:49:11Z

3

Before calling

$("img.lazy").lazyload();

Add lazy class and the data-original attribute to all images of the database content. e.g. You have database contents in a div with id "content".

$("#content img").each(function() {
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
});

Hope it will help.

edited Jul 12, 2016 at 18:49

mhyassin

1341 gold badge1 silver badge16 bronze badges

answered Jun 13, 2012 at 13:51

FatalError

98414 silver badges33 bronze badges

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

5 Comments

Thomas Over a year ago

the problem is i can add data-original attribute....i can not change my html markup. so now tell me how to use this library to load image on demand....or suggest any other library to load image on demand without changing my markup??

sofl Over a year ago

This solution only touch your image tags at client side / on the fly so you don't have to change your markup..or am i wrong?

Thomas Over a year ago

please tell me what u trying to say

FatalError Over a year ago

I guess, we have to change the image tag (add class or css) to stop the browser to create request for it.

Michelle Cantin Over a year ago

At the end, add this: );

Collectives™ on Stack Overflow

lazy load of images using jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related