implement images «lazy loading».
Plugin for Cotonti CMF. Designed for implement images «lazy loading».
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.
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.
Plugin works out from the box. For better results you may setup
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.
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).
To see this Extension in action - open «LazyLoad» plugin page. There you can see sample page with multiple «lazyload» images.