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.

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

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

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

Using YUI 3 – ImageLoader

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

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.

 

 

from http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/