jQuery Lazy Load Images on Scroll without Plugin : Top 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.

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.

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. 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.

Read Out More Posts On DesignSkew:

Darin Casner

Darin Casner is a professional writer and founder of Burlington Social Media Day. She helps people find amazing productivity tools and software to solve their daily business-related needs. Her aim is to educate the readers so that they can use the right tools to grow their business online.

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

Leave a Comment