LazyLoad

Plugin for Cotonti CMF. Designed for implement images «lazy loading».

#1. Description

Extends pages with «lazy loading» functionality. It speeds up loading of page with a lot of images. With this Extension images on the page are loading only when they appears on screen. So it is not loaded until you scroll page for certain image had visible.

#2. Features

• Delays loading of images outside a viewport
• Pages containing many images loads faster
• Two different library for your choice
• Control what images to make «lazy»
• Works in browsers with JS switched off
• Sample page included

#3. Demo page

Sample page included in Extension pack. Just install and open plugin page (http://www.yoursite.com/lazyload/). View demo page without installation you can here.

#3.1. Comments

Plugin works out from the box. For better results you may setup height and width attributes for you images. In that case content structure won't be rearranges during «lazy» load.

#3.2. How extension works

Extension parses page content for img tags checks src attribute and substitute it with dump (transparent) image. When page loads script processes that img tags to check is it visible at this moment or not. As image become visible it loads as standard one.

#4. Install

• Unpack, copy files to root folder of your site.
• Install via Admin → Extensions menu (Administration panel → Extensions)
• Checks setting in config (Administration panel → Extensions → LazyLoad → Configuration).

#4.1. Comments

To see this Extension in action - open «LazyLoad» plugin page. There you can see sample page with multiple «lazyload» images.

#5. References

• LazyLoad sources -- Actual code on GitHub