An alternative to lazy loader using the jquery load method for external images

Well I was googling again and again looking for a jquery lazy loader. Unfortunately there is nothing out there. Just the old fashion script which actually doesn’t work properly in modern browsers as Mika says on his website.

Well I had some photo galleries which have from 20 to even 60 images to load. That is a really big problem for the end user as well as for Google (SEO thinking). As you already know Google pays attention at the time a webpage needs to be loaded. That’s actually the reason that Google added the track page load time parameter to his latest additions in Google analytics script.

_gaq.push(['_trackPageLoadTime']);

So I needed faster pages and there was not a plug in out there to do this. So I ended up with some custom functions using jquery and a couple of javascript arrays. Actually the website is not live yet but I will post it as soon as I got it live.

A few words about the gallery: I got a jcarousel slider (I always use the sorgalla.com) on the bottom of the media gallery with six thumbnails currently showing. The idea is to have just six thumbnails visible plus the first main image while the rest will be loaded once the end user ask for them. Have a look at the draft screenshot to see what I mean. That’s all I need to load (six thumbnails and one main size).

media gallery alternative to lazy loader

media gallery alternative to lazy loader

So all I did is to store all image data (paths) to a couple of arrays. I am also using a couple of more javascript variables to store the other data.

//store the current photo number
var showing = 0;
//store the index of the clicked photo
var index = 0;
// store the last visible thumbnail image in jcarousel
var showInCarousel = 5;
// array to store image paths
var galleryImagesArray = [];
// array to store thumbnail paths
var galleryThumbsArray = [];
//on document ready init the jcarousel with a few parameters
$(document).ready(function () {
  //Initialise the jcarousel and call the startCallback function
  $('.thumbs ul').jcarousel({
        scroll: 1,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        visible: 6,
        initCallback: startCallback
    });
});
//once I click any of the thumbnails go and load the main image and display it using a fade out fade in funtion
$(".thumbs ul li a").click(function (event) {
  // hide all main images
  $(".mainImage").hide();
  showing = index;
  index = $(".thumbs ul li a").index(this);
  $(".mainImage:eq(" + showing + ")").fadeOut(500, function ()
  {
  // once the showing image is faded out load the new main image and display it using the fade in function
    var img = $("<img />").attr('src', galleryImagesArray[index]).load(function() {
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      alert('broken image!');
     } else {
      $(".mainImage:eq(" + index + ") a").prepend(img);
      $(".mainImage:eq(" + index + ")").fadeIn();
     }
    });
  });
  return false;
});
function startCallback(carousel)
{
  $('#nextBtn').bind('click', function () {
    //move to next item
    carousel.next();       

    if (index < thumbsLength-1) {
       showing = index;
       index = index + 1;
       showInCarousel = showInCarousel + 1;
       //load the next thumbnail photo and display it
       var img = $("<img alt='' />").attr('src', galleryThumbsArray[showInCarousel]).load(function() {
       if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
          alert('image does not exist');
        } else {
          $(".thumbs ul.jcarousel-list li:eq(" + showInCarousel + ") a").prepend(img);
          $(".thumbs ul.jcarousel-list li:eq(" + showInCarousel + ") img").fadeIn();
        }
       });
       $(".mainImage").hide();
       //once the showing image is faded out load the new main image and display it using the fade in function
       $(".mainImage:eq(" + showing + ")").fadeOut(500, function () {
        var img = $("<img alt='' />").attr('src', galleryImagesArray[index]).load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
          alert('image does not exist');
        } else {
          $(".mainImage:eq(" + index + ") a").prepend(img);
          $(".mainImage:eq(" + index + ")").fadeIn();
        }
       });
     });
   }
   return false;
});
//same actions as next butotn click instead that you go backwards ie. index = index - 1 etc.

$('#previousBtn').bind('click', function () {
  carousel.prev();

  if (index > 0) {
    showing = index;
    index = index - 1;
    showInCarousel = showInCarousel - 1;
    $(".mainImage").hide();

    $(".mainImage:eq(" + showing + ")").fadeOut(500, function () {
      var img = $("<img alt='' />").attr('src', galleryImagesArray[index]).load(function() {
      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        alert('image does not exist');
      } else {
        $(".mainImage:eq(" + index + ") a").prepend(img);
        $(".mainImage:eq(" + index + ")").fadeIn();
      }
    });
  });
 }
 return false;
 });
};

Well I’ve used some comments to make the script more clear. I think it’s quite clear of what I am doing here but do post any comments or any additons/fixes you may have in order to have a faster script. There is one method on document readyfor the jcarousel to start working. There is one more for the thumnail click ($(“.thumbs ul li a”).click). Another two functions within the startCallBack method which handles the carousel left and right buttons as well as loads both thumbnail and main image usinf the jquery load method. The current script have been tested in all modern browsers.

Do you want to know what was the results of that? well in a page with about sixty photos the load time of the page was about 20 seconds or 3.9 mb while now it takes about 7.5 seconds to load with 810 kb. That really makes a difference for both the end user and the Google ranking factors.

Share it!Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInShare on StumbleUpon

Comments (2)

  1. Search Engine Optimization
    February 13, 2014 at 10:31 am · Reply

    Very useful post. Webpage’s speed is an important parameter not only for SEO purposes but for user experience issues as well. A slow webpage may have high bounce rate since most of its visitors will wait just a few seconds (usually up to 4 seconds) to be loaded. And a high bounce rate influences its SERP.

    • Giorgos Grispos
      February 13, 2014 at 10:54 am · Reply

      Thank you for the comment. This is an old post and now there are more efficient ways to work with photo galleries, many js or css files. Cloud servers or CDN networks like Cloudflare is what I suggest to my clients.

Leave a reply

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

Back to Top