Jeff Malterre

Recently I found this plugin called jQuery Image LazyLoad, and it’s been around for 3 years now. In history, web designers and developers wanted their images preloaded when a user browses to their page, in order for it to display properly and look seamless – you can find a plethora of old JavaScripts out there that do this. However, this was mostly intended for the design, and not for the content. Lazy Load is intended for content, not design, and it works in the exact opposite way.

Lazy Load will display images (content) that are on the visible portion of the web page, images that are outside of the visible are of the page are not loaded until the user scrolls down the page – this is when Lazy Load will load those images. The idea is to save page load time. Since the images outside of the visible area are not loaded until the user scrolls to them, load time is saved. Let’s see we’re looking at a blog that displays 20 articles on a page and has several images in each post. When we load the page, we’re probably only seeing the first 2 articles on top, while we’d have to scroll down to see the rest of the posts. Well, since we’re not actively looking at the rest of the posts at that time, then we wouldn’t need the images within those posts loaded, right? We’d only need to see those images when we scroll down the page to view those posts. That’s the great idea behind this tool, it will load the images outside of the active visible area of the browser when the user scrolls down to that part of the web page. Load time is saved because those images outside the active visible area of the page are simply not loaded, but are waiting to be loaded when the user gets to that part of the page.

Ok, so now we know how great this idea is, and how wonderful of a tool we have here. Now we’re going to focus on the plugin for WordPress that implements this tool. I recently installed this plugin and noticed only 1 thing it was missing – a setting to target elements. Why do we need this setting? Well, if you’ve installed this plugin and used it, you’ll notice that some images that are in the active visible area of the screen aren’t loading until the user scrolls to the bottom of the page (actually, to the bottom of the main content area – the posts.) An example of this would be a sidebar, and this is because the HTML for that sidebar would come after the HTML for the main posts – towards the bottom of the page. Even though the HTML for that sidebar is at the bottom of the page, CSS will bring it to the top (if that’s how your layout is being displayed.)

First, let’s think of how we’re going to fix this problem. The function is being applied to all elements of the page. We know there’s a function that handles the lazy loader and if you’re familiar with jQuery, we know that that we can target specific elements, and apply the function to those specific elements. We only want to target our posts and maybe the footer. First determine what classes or ids of the elements that contain the content you want to target are. In my case (at the time of this post) my I’m going to use #mainColumn and #footer, because those ids are applied to the elements of the content that I want to target.

Changing the code to target these elements is really easy, so let’s change it! First let’s take a look at the original code that call’s this function (we don’t need to change the function, just the call to the function.)

~/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php

<?php
 
  /*
  Plugin Name: jQuery lazy load plugin
  Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
  Description: a quick and dirty wordpress plugin to enable image lazy loading.
  Version: v0.10
  Author: Andrew Ng
  Author URI: http://blog.andrewng.com
  */
 
function jquery_lazy_load_headers() {
  $plugin_path = plugins_url('/', __FILE__);
  $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
  $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
  wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
}
 
function jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<<eof
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}
 
  add_action('wp_head', 'jquery_lazy_load_headers', 5);
  add_action('wp_head', 'jquery_lazy_load_ready', 12);
?>

The description of this plugin is completely accurate, quick and dirty. The only thing it really lacks is a configuration for the selector that the function is called from – jQuery(“img”).lazyload on line 27. This is what is applying the Lazy Load function to every image on the page. We’re going to change it so that it only selects what we want it to, again in my case (at this time) it’s #mainColumn and #footer.

We’re going to change the line 27 of that same document we have opened to this:

27

  jQuery("#mainColumn,#footer").find("img").lazyload({

All this says is “jQuery, find all the image tags in the #mainColumn and #footer elements, and apply the lazyload function to them!”; Like I said, very easy