jQuery Lazy Load Images on Scroll without Plugin : WordPress Tip

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

Not only lazy loading of images in webpages helps in age’s performance, but also help 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 helps your WordPress blog load faster. While using this trick, you should also use Cache Technique for simplifying the page loading.

Recommended Reading : Create Tilt Shift Photo Effect Using jQuery

How to setup Lazy Loading with jQuery

There are plugins that allow you to perform simple things, but less the plugins you use, more efficient will be your blog.

jQuery Lazy Load Images on Scroll without Plugin : WordPress Tip

Doesn’t matters what wordpress theme you are using, you can implement lazy loading very easily. Its just 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 into your 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.

DesignSkew Editorial Team

We have a team of experts in graphics related stuff, who bought this article up-to you.

1 thought on “jQuery Lazy Load Images on Scroll without Plugin : WordPress Tip”

Leave a Comment