CODEWITHSUNDEEP
jquery
Thomas
Thomas

Reputation: 34188

lazy load of images using jquery

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.

Upvotes: 1

Views: 8053

Answers (1)

FatalError
FatalError

Reputation: 964

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.

Upvotes: 3

Related Questions