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/

Lazy loading (dynamic function loading)

Lazy loading, also known as dynamic function loading , is a mode that allows a developer to specify what components of a program should not be loaded into storage by default when a program is started. Ordinarily, the system loaderautomatically loads the initial program and all of its dependent components at the same time. In lazy loading, dependents are only loaded as they are specifically requested. Lazy loading can be used to improve the performance of a program if most of the dependent components are never actually used.

A developer can enable lazy loading on a component-by-component basis in both thread ed and non-threaded applications. The disadvantage of lazy loading is that if a component call s most of its dependents, every function call to a lazily loaded component requires extra instructions and time. Consequently, if a program can be expected to use most of its dependent components, then lazy loading will probably not improve performance.