How To: Lazy Load images with Jquery Fade in WordPress

A simple guide on how to lazy load images with jquery fade in wordpress. If you are a regular reader of our blog, you might have observed that we lazy load images using jquery fade-in effect.

Why you should practice Lazy Loading images?

Lazy loading is nothing but loading images after the page has completely rendered. If you are using a lot of images in a post, bulk fetching all the images, will take a lot of time, and eventually readers will choose to close the tab because your site performance is too slow.

To prevent this you can use a CDN, to parallelize downloads across hostnames and fetch the images faster.

Read: How I Setup MaxCDN on my WordPress Blog for Free within minutes

But even for large sites like blogs related to web designing, a CDN will not suffice as the site will still perform slowly compared to not loading images at all. If you can somehow delay the loading, you can save a lot of bandwidth in the process. This is where lazy loading comes into picture. It starts loading an image, only when the user scrolls to them.

So lets check out how to perform lazy loading in WordPress.

Lazy Load images with Jquery Fade in WordPress without Plugin

Step 1: Make sure you are calling the jQuery library in your site properly. Remember, loading jQuery scripts multiple times may cause conflicts and breakdown your site. If you are unsure about jquery file being called twice, then do check out,

Read: Remove the default jQuery included in WordPress easily

Step 2: Download these two files:

Lazy Loading script (Link)

Placeholder image (Link)

After download, upload the script to your theme folder (http://www.yourblogname.com/wp-content/themes/yourtheme/) and upload the placeholder into your images folder (http://www.yourblogname.com/wp-content/themes/yourthemes/images/)

Step 3: Drop this function into your functions.php file:

function revthatup_lazyload() {
?>
<script src="http://www.revthatup.com/wp-content/themes/sensational/jquery.lazyload.mini.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
 if (navigator.platform == "iPad") return;
jQuery(".content img").not(".sidebar img,.cycle img").lazyload({
 placeholder : "http://www.revthatup.com/wp-content/themes/sensational/images/lazyload.gif",
 effect : "fadeIn"
 });
});
</script>
<?php }
add_action('wp_footer','revthatup_lazyload',99);

Don’t forget to replace the urls for the script and the placeholder image in the function above. And you are done!

What we are doing in this function?

As you can see we are only using jquery lazyload for content images (images inside the post), and not for sidebar or other images outside the post. We have also included the jquery fade-in effect, so that your images get a nice fade in animation which is pleasing to see.

At last, we are using the add action routine, to load the function in wordpress footer and giving it a priority 99. The reason we are doing this is wordpress footer is a great place to load all your javascripts, since loading scripts in your header might block the page rendering and sometimes cause the white screen of death. Giving it a priority of 99, ensures that it gets included at the very bottom, after all your essential wordpress scripts.

Wasn’t this article about lazy load images with jquery fade in wordpress helpful? If you are looking for more of such awesome resources, do subscribe to our newsletter!

Thanks for the code Greg!

Subscribe to our Weekly Newsletter

I take your privacy very seriously

Comments

  1. Saurabh Reply

    Thanks Dude! :-)
    I wanted to add jQuery Lazy loading but not wanted to use plugin for that. Thanks. Your article is really helpful.

Leave a Reply

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

Notify me of followup comments via e-mail.