Website speed plays important role in your business. But, there are some factors which can affect the speed of your website. One of them is your heavy images. Heavy or uncompressed images can definitely kill your website speed. You must compress your images before use on the website. Lazy load images also help to improve site performance.
Meaning Of Lazy Load Images
Lazy load images do not load until user scrolls to them. That way, your browser does not load all images which will reduce the size of the webpage. As a result, your webpage loads fast.
How To Use It?
Some pluging available which provides a way for lazy loading your images. Out of them I am using Lazy Load.
Let’s see how to use this jQuery Plugin.
First you need to install this plugin by either of following way. You need to install bower or npm.
- – $ bower install jquery.lazyload
- – $ npm install jquery-lazyload
Once installed, include the jquery.lazyload.js file using the tag.
Next, we need all images to be lazy loaded. For this, we will apply some logic using jQuery. In the below code we first count the length of images on the webpage. Then, we loop through each image and add attribute 'data-original' to the tag. Finally, when incremental value matches the exact length of images we call lazyload function on the image tag.
[php]
<script type="text/javascript">
$(function() {
var imgcnt = $('img').length;
var i = 0;
$('img').each(function() {
$this = $(this);
$this.attr('data-original', $this.attr('src'));
$this.removeAttr('src');
i++;
if(i == imgcnt) {
$("img").lazyload({
effect : "fadeIn"
});
}
});
})
</script>
[/php]
I hope you understand about lazy load images. You may also want to read our article on 3 Quick Ways to Improve Site Performance. Please share your thoughts in the comment form below.
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.