See How Easily You Can Increase Page Load Time 10 Fold With jQuery

General
Page content

Introduction

It’s no new news to us that images hurt a page’s load time worst then anything out there. There are a lot of things you can do to try and alleviate some of the problem. You can use smaler images, you can reduce the quality on images, etc.

But consider this. You know that your website is going to a long one. Meaning that the user is going to have to scroll. This means that they don’t see the entire page when they first load. Wouldn’t it be nice to only load what they need? You could load only the images that are in view. This will give the user time to read the content about the fold on your page, then as he scrolls down, you can gradually load the rest of the images.

This is referred to as Lazy Loading. It’s exactly the opposite of preloading images. We preload images for a lot of reasons. The classic example is in those old school JavaScript (and even CSS) rollovers, where we preload the rollover image so that there is no delay when they are needed.

Enter Lazy Load Plugin for jQuery

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. It simply delays the loading of images on the web page until they are within view. This gives the page quicker initial load time.

This works out great if you have a page with a lot of heavy images lower down and a lot of navigation links at the top. If the user is trying to get to a specific page using this plugin would be a great help.

What You Need For Lazy Loading

Using Lazy Load

First thing, as with any jQuery script is to load the libraries in the head of your HTML file.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

The we make one simple call to the initialize the plugin:

$("img").lazyload();

We can even go one step further and add a little bit of padding to when the image loads:

$("img").lazyload({ threshold : 200 });

This says that we load images that are 200 pixels from the page load. With this setting the images are still loaded before the user gets to them.

Check out the Lazy Load plugin, it’s great work. Check out the Demo also.