jQuery Lazy Load Images in WordPress without Plugin

Share This Article:

Improve page loading speed and optimize WordPress with jQuery Lazy Load Images. As Google considers loading speed as one of the main ranking factors, it is very important to optimize WordPress for Google Page Speed Score. If you already know How to Lazy Load Images in WordPress, then here is a tutorial for doing same without using any WordPress Plugin.

jQuery Image Lazy Load WP Plugin

jQuery Lazy Load WP is a free WordPress plugin that helps to add lazy loading to all images in any page of your blog. It is simple and handy plugin that works like a charm. Options page is not available, but still its a good plugin.

jQuery Lazy Load Images in WordPress without Plugin

jQuery Lazy Load Images without Plugin

Here is an alternative if you dont want to use the above mentioned plugin. But 100 out of 100 times, I recommend to go for a plugin and this “Without Plugin” stuff sucks in the long run. Like if you change your theme this code will go away and you need to add it again. Using a plugin you can activate or remove it any time.

Anyhow this tutorial is for those who like to experiment or for those who dont want to Install a WordPress Plugin.

Step 1: Download jQuery Lazyload Plugin from GitHub and look for jquery.lazyload.min.js file in that package.

Step 2: Upload jquery.lazyload.min.js file (Minified Version) to your theme folder and grey.gif image to theme/images folder.

Step 3: Adding scripts to WordPress using wp_enqueue_script().

Note: These code snippets are directly taken from the jQuery Lazy Load WP plugin and complete credit goes to its author.

Add this code to functions.php file in your WordPress theme and save it. It is recommended to Backup your WordPress theme before proceeding further.

/** Add jQuery & Lazyload Plugin to WordPress Theme*/
add_action('wp_enqueue_scripts', 'wps_scripts', 5);
function wps_scripts() {
wp_deregister_script('jquery');
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', '1.6.1', true);
wp_enqueue_script( 'jquery' );
wp_register_script('jquerylazyload', get_bloginfo('template_directory').'/jquery.lazyload.mini.js', 'jquery', '1.5.0', true);
wp_enqueue_script( 'jquerylazyload');
}

Step 4: Initialize jQuery Lazy Loading of Images.

After adding scripts, we need to initialize the lazy loading script and here is a snippet for that. Add below code to functions.php file and save it.

/** Add Lazy Load functions in Footer */
add_action('wp_footer', 'jquery_lazy_load', 12);
function jquery_lazy_load() {
$placeholdergif = get_bloginfo('template_directory').'/images/grey.gif';
echo <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").not(".cycle img").lazyload({
effect:"fadeIn",
placeholder: "$placeholdergif"
});
});
</script>
EOF;
}

Voila, you have successfully added “jQuery Lazy Load” to your WordPress theme and now its time to test it.

For Child Themes:

In case if you are using a Child Theme, then replace template_directory in the above code snippets with stylesheet_directory and it will work for sure.

If you dont notice any lazy loading effect for images on your WordPress blog, then there might be some conflicts with scripts. Try disabling JS Minification if you are using W3 Total Cache Plugin and also check if issue is caused by WP Minify Plugin.

Image via: nationalgeographic.com

Genesis is the most flexible WordPress theme framework that comes with tons of options. We have been using Genesis on all of our blogs and recommending the same to you. Every bit of it is coded according to the standards. Give it a try!

Comments

  1. sam says:

    would u kindly clarify a bit more by giving an example how to replace template_directory? I’m having trouble with it… because i’m using child theme..

  2. This is very good tutorial for all the wordpress theme developer, But i think there is no need to re-invent the wheel, for all those who do not want to customize their themes. Thanks bharat for this beautiful tutorial

  3. Not working on my genesis theme plz help me bro…….

Speak Your MindComments Policy →

*

Looking for More Awesomeness?