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?
- 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
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.