Implement jQuery Lazy Load Images in WordPress Theme Manually

You might have seen images loading with a “fade-in” effect as you scroll down on some websites. That effect is called “Lazy Load”.

If you run an image based blog, or post several images in a single post, it can take a while for your site to load completely. And as you know, visitors and search engines alike do not appreciate slow websites. A solution to this issue is to load images only on demand. We can do this using a jQuery plugin called Lazy Load. It’s just 3 KB (minified) in size, and works nicely in all popular browsers.

Here are the steps to implement lazy loading images feature in a WordPress theme:

Step 1

Download the plugin from GitHub. jquery.lazyload.js is the original file, and jquery.lazyload.min.js is the minified version. Grab the desired version. There are several examples available for download as well there.

Upload the file to your theme’s script folder.

Step 2

Drop this code into your active theme’s functions.php file with the correct path to image:

function sumtips_lazy_load() {
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://yoursite.com/wp-content/themes/theme/scripts/jquery.lazyload.mini.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($){
	$("img.lazy").lazyload({
	effect : "fadeIn"
	});
});
</script>
<?php }
add_action('wp_head','sumtips_lazy_load');

Here JavaScript is added to head section of the page. If you’d rather like it in the footer, replace add_action('wp_head','sumtips_lazy_load'); with add_action('wp_head','sumtips_lazy_load');.

Also, if you’re already using jQuery, remove the reference to that from the code.

Step 3

Now when you add an image in a post, put the placeholder image into src attribute, and URL of the real image in an attribute called data-original. Like this:

<img class="lazy" src="lazyload.gif" data-original="postimage.jpg" />

In earlier versions of Lazy Load there was no need of this step as the JavaScript used to do everything automatically for us, but since newer browsers load images even without the src attribute, this step is necessary.

If you want, you can rename data-original parameter to something else. Here’s how you can do that:

$("img.lazy").lazyload({
  data_attribute  : "sumtips"
});

Now you can use it like this:

<img class="lazy" src="lazyload.gif" data-sumtips="postimage.jpg" />

Step 4

Most users have JavaScript enabled in their browser, but for those who don’t have, we can degrade lazy load functionality gracefully like this:

<img class="lazy" src="lazyload.gif" data-original="postimage.jpg" />
<noscript><img src="postimage.jpg" </noscript>

Just include the real image inside <noscript> block.

To prevent both placeholder and the real image showing up at the same time, hide the placeholder by default with css:

.lazy {
  display: none;
}

If the browser has JavaScript enabled, we can automatically display placeholder with this code:

$("img.lazy").show().lazyload();

That’s all!

Tweet

---