You are here: Home » Dev » jQuery Lazy Load Images on Scroll without Plugin : WordPress Tip

jQuery Lazy Load Images on Scroll without Plugin : WordPress Tip

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

Visit Author's Website

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

1 Comment

  1. 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 …!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge
This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 5 approved comments. Use your Real Name and then @ your keywords (maximum of 3)