March 18, 2024 4:05 am

How to create lazy loading images using jQuery

Today I am going to give you a simple but very useful jQuery plugin which can load images on page scroll called lazy loading, if you used high resolution images on your website then it’s a best solution for you to make your web site looks professional. This makes the page load faster and reduce server traffic since the client loads the images in the region what they look at.

lazy loading images using jQuery

[wpdm_file id=85]DEMO

I have used a plugin Devrama Lazyload you can download it and use it in your web projects.

HOW TO USE IT

First of all include jQuery and this plugin in your html page.

<script src="jquery-1.9.1.min.js"></script>
<script src="http://demo.phpgang.com/lazy-loading-images-jquery/jquery.devrama.lazyload.min-0.9.3.js"></script>

You must include these 2 files in your project.

Add Images:

Images markup used data attribute not src attribute let see example.

<img data-size="1024:588" data-lazy-src="images/1.jpg" />
<img data-size="1024:588" data-lazy-src="images/2.jpg" />
<img data-size="1024:588" data-lazy-src="images/3.jpg" />
<img data-size="1024:588" data-lazy-src="images/4.jpg" />
<img data-size="1024:588" data-lazy-src="images/5.jpg" />
<img data-size="1024:588" data-lazy-src="images/6.jpg" />
<img data-size="1024:588" data-lazy-src="images/7.jpg" />
<img data-size="1024:588" data-lazy-src="images/8.jpg" />
<img data-size="1024:588" data-lazy-src="images/9.jpg" />

Used data-size for image width and height you have to define it like this for image height and width, data-lazy-src used to give image path no need to use src for this lazy load plugin.

Call method of lazy loading

<script type="text/javascript">      
    $(function(){
        $.DrLazyload(); //Yes! that's it!
    });
</script>

This above function apply lazy loading on all your images which is on lazy loading format.

You can also use this lazy loading on a particular area of your document with ids like below.

<script type="text/javascript">      
$(function(){
    $('#content').DrLazyload();
});
</script>

This code will apply lazy loading on content div only.

[wpdm_file id=85]DEMO

That’s all I hope you like this tutorial please feel free to comment your suggestion below.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

4 responses to “How to create lazy loading images using jQuery”

  1. Chris Michael says:

    I am currently looking for an option to load a set up images on scroll for a wallpaper site. I have the images saved locally and the paths to the images are stored in my DB. Right now my PHP is pulling an array of about 30 images. But this won’t work when I have 10000 images. So I need to pull the images as the page scrolls. Would you consider this a good solution to my problem? Thank you in advance

  2. Chris Michael says:

    I am currently looking for an option to load a set up images on scroll for a wallpaper site. I have the images saved locally and the paths to the images are stored in my DB. Right now my PHP is pulling an array of about 30 images. But this won’t work when I have 10000 images. So I need to pull the images as the page scrolls. Would you consider this a good solution to my problem? Thank you in advance

Leave a Reply

Your email address will not be published. Required fields are marked *