Lazy Loading Of Images – Resources You Need

It is very usual that a website presenting a list of images which is "longer in size than the viewport of our monitors" & we simply need to scroll to view the rest. In such cases, in order to make the websites load much faster, we can use lazy loading.

Lazy

What is lazy loading?

It is a design pattern that means; not-loading a content until it is needed. Basically, it is the opposite of "preloading".

The technique is mostly used in websites that have a long list of images & rather than loading all the images at once, we see them load when we try to view them by scrolling down.

How the logic works?

Using JavaScript, it is possible to detect the following:

  • the coordinates of the part of the page (x-y) we’re viewing
  • the coordinates of a specific element
  • the width-height of the viewport

Having these inputs, we can easily understand if a given element is in the viewport or not. And, after it becomes "in", we can make a JavaScript call to load the content.

Here are ready-to-use resources for implementing lazy loading:

Using jQuery – Lazy Loader

jQuery Lazy Load

A jQuery plugin for delaying the loading of images in (long) web pages. It also enables you to set a sensitivity level (when/how close should the loading must happen) & a placeholder image.

Using MooTools – MooTools LazyLoad

MooTools LazyLoad

This MooTools plugin again makes it possible to set a placeholder image & sensitivy level (range).

Using YUI 3 – ImageLoader

YUI 3 Image Loader

The ImageLoader Utility lets you determine triggers and time limits to initiate image loading. This allows you to ensure that the images are loaded before your user is likely to see them. The resource is very well-documented & supported with examples.

Using Prototype – lazierLoad

Prototype LazierLoad

Besides the common settings, this lazy loader for Prototype has some filters like "extension, wifth & height" for limiting the type of the files to be lazy loaded.

  • David

    Is it really more interesting lazy loading than pre-loading? It depends. With lazy loading, The onready page event will arrive sooner (so jquery binds will attach sooner) and jquery will act sooner.

    But if you have no onload javascript code attached, you can scroll smoothly through the page even if images are loading. Loading images do not block the browser.

    What do you think? When is this pattern helpful?

  • @David,

    I see your point with the onready event arriving sooner as the overall size of the page will be smaller and load faster.

    Using the onready event is totally up to you I think. For me, I usually use it to make sure every element I hardcoded in JS is loaded.

    With lazy loading in general, a better pratice can be:
    – loading the contents in the viewport at the initial load
    – after x seconds, loading the rest of the content without even waiting for the user to scroll.

  • David

    Thank you very much for your explanation Umut.

  • tok

    i say NO to lazy loading. It’s like ajax overuse, every where you go you need to wait a few seconds. extremely annoying. Instead break your content into several pages. But nice roundup, thanks 🙂

  • for those who like preloading, here is a comprehensive analysis of pre-loading techniques: http://www.bloggingdeveloper.com/post/Image-Preloading-Deeply-CSS-Javascript-jQuery.aspx

  • steve

    Please forget Lazyload! I hate it too to wait seconds for one image.

  • I can’t do this. How can I do this in my asp.net page? Is there any good tutorials for lazy load fadein?

  • Richard

    A hybrid of ‘normal’ linear loading and lazy loading is the holy grail as far as I’m concerned.

    Loading the initial images in the viewport, then loading x number of objects at a time until the page is fully loaded (never waiting), where the order of the objects is constantly sorted based on proximity to the viewport or other behavioral prediction.

    Possibly this method should be called opportunistic loading?

    I’ve been tinkering around with designing a site with lazy loading content, javascript and even css, where a simplified site is delivered immediately, then more functionality is layered on, making this occur without affecting layout is challenging, but the reward is great. The initial pageload and first look at the content is incredibly fast. Post-loading menus, sidebars and ads makes for a fantastic user experience.

  • Alternatively to jQuery Lazy Load, you can use Jquery Asynchronous Image Loader (JAIL) plugin for jQuery. You can find more details at the Project Homepage

  • As of February 2011, the JQuery plugin remains broken, so take it into account.

Search