Adding a Lazy Load Effect to Images with jQuery

This tutorial will help you to Implement a Lazy Load Effect to Images On Your Website. This is mostly useful for sites having long web pages or sites with high resolution images on pages. Thanks to this jQuery Plugin: Lazy Load which adds a delay in loading of images so that the images only loads when the user scrolls down and reaches to them. In this way, you can Save Bandwidth, as only those images will be loaded which your user wants to see by scrolling down on page. It also decreases your page’s loading time and gives you SEO Advantage, because faster sites get more ranking and hence more visitors from Search Engines.

How to Add Lazy Load to Images

Here is the implementation of this plugin:

Usage:


HTML:

This plugin depends on jQuery, and you must include the jQuery library at the end or in the header of your page.

We supplied the jQuery Library File within the script files. You can include the fresh library from external resources like Google. In addition to jQuery library, we will also be including the Lazy Load Javascript File within our page for making it to work.

You must Alter Your Image Tags and put the Image Url inside data-original attribute instead of src attribute. Also you should specify the Lazy Loading Images by assigning a class Lazy to them. So this makes easy to Bind Lazy Load Plugin to specified images only. Here is the code for your applying on your Image Tags.

In above code you can see that we are not using src attribute. Because Lazy Load Plugin requires to remove this attribute from images on which you are planning to apply it.

Note: You must use Height and Width attributes in images so that Lazy Load can work properly.

JAVASCRIPT:

Copy the following Javascript code anywhere in your page. Best is to put this code in the footer.

Be sure to put the above code inside <script></script> tags because it’s a javascript.

Basic work has been done, and your images should now be Lazy Loaded.

Now, lets have a look on some options offered by this Plugin:

Setting Threshold:

By default this plugin loads images when they reach inside your view port, but this settings will cause the images to load earlier. For example if you set the threshold to 200, then your images will be loaded 200 pixels before you reach them by scrolling.

this will load your images earlier before you reach the image.

onEvent Trigger Loading:

This option will add the functionality to load image when some event is triggered. Default behavior of plugin is to load images when appear on your screen. But if you want to load images when user clicks on them, then you can use this setting.

Delayed Loading of Images:

There’s another cool effect. See Below:

The above code will cause a Delayed Loading of Images. Means it will wait for 5 seconds after the rest of the page loads completely and then it will load images.

 

Give Effects while Loading Images:

The following code will give fadeIn effect to all images while loading.

 

Using Multiple Options

If you want to use more than one options from above, you can do it like this:

How To Add Lazy Load Effect To Images Using JQuery
How To Add Lazy Load Effect To Images Using JQuery
How to Add Lazy Load Effect To Images using jQuery.zip
1.2 MiB
0 Downloads
Details

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top