Not only lazy loading of images in webpages helps in age’s performance, but also helps in Search Engine Optimization as observed. You can use jQuery and even Mootools for lazy loading images. The images will only show up when you will scroll to them.
This jQuery tip reduces a lot of external requests while loading the page, ultimately helping your WordPress blog load faster. While using this trick, you should also use Cache Technique for simplifying the page loading.
Contents
What is Lazy Loading?
Lazy loading is when you download content as you need it, instead of downloading it all at once.
Lazy loading is an optimization technique used on the internet. It loads only the section of the web page that you need at first, and it does not load any other parts until you click on them. This way, it doesn’t have to load all of the information from start to finish.
One form of lazy loading is called infinity scroll. This means that as you scroll down the page, more content will load automatically.
Why does lazy loading matter?
The huge payload of a web page is full of images, scripts, stylesheets, fonts, and videos. Images take up over 60% of the size of a typical web page. It is not possible to get rid of them because they are important for the design of a webpage.
Without any optimization, your web browser downloads everything before it renders the page. This makes the page load slower.
It makes sense to do what you can to make your web pages load faster. And when it comes to images, they are the biggest contributor to the size of a website.
So if you start with them, that is a good idea because then your website will load fast. This is where lazy loading comes in handy because it only downloads the parts of an image that are in view on your page at any given time.
How to setup Lazy Loading with jQuery?
There are plugins that allow you to perform simple things, but the less the fewer plugins you use, the more efficient will be your blog.
Doesn’t matter what WordPress theme you are using, you can implement lazy loading very easily.
It’s just a two-step tutorial, one for adding the jQuery and the other is to assign the img tag a class, if you want to lazy load specific images on your WordPress blog.
Here’s the jQuery function, which you will need to add to the scripts of your theme.
/* lazyload.js (c) Lorenzo Giuliani
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*/
!function(window){
var $q = function(q, res){
if (document.querySelectorAll) {
res = document.querySelectorAll(q);
} else {
var d=document
, a=d.styleSheets[0] || d.createStyleSheet();
a.addRule(q,'f:b');
for(var l=d.all,b=0,c=[],f=l.length;b= 0
&& rect.left >= 0
&& rect.top )
}
var images = new Array()
, query = $q('img.lazy')
, processScroll = function(){
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function () {
images.splice(i, i);
});
}
};
}
;
// Array.prototype.slice.call is not callable under our lovely IE8
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
};
processScroll();
addEventListener('scroll',processScroll);
}(this);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
And here’s how you can call the jQuery function to implement Lazy loading of images dynamically. You need to use the lazy class for every image you want to load using the jQuery function.
Conclusion
Lazyload is a good thing to have for your blog or corporate website. It helps with SEO and Google can see it. But, you don’t need to worry about this because they know how lazyloading works.
You can also customize it however you want by changing the animation and adding a delay.
Hi,
It is good information and it is very helpful. Lazy It is very helpful since i was using themes to show images.
Good Work and Keep Going …!