EverWeb Codebox logo

EverWeb Widgetbox 3

Lazy Loading Slideshow

Lazy  Loading Slider Widget

Lazy Loader Slideshow

Swipe On Touch Devices

Variable number of slides shown at any one time

Captions Optional

What Is Lazy Loading?

This slideshow is aimed at photographers and artists who need to display a large number of high quality images. The optional directional arrows and captions have been located off the slider canvas.
A slideshow with too many oversized images has a very detrimental effect on page download time. All the images have to download at once - even if the visitor doesn't look at all - or any of them.
Lazy loading usually defers the downloading of items outside of the visitor's viewport and only loads them when they scroll into view.
Although many website owners think that the world needs hundreds of their images, in practice most visitors won't take the time to look at more than a dozen - if that. For those who are not convinced, lazy loading may be the answer for preventing visitors from leaving their site or pushing their data download limits.
The images in this slideshow are only downloaded on demand as they appear into view for the first time.
Lazy loading is not perfect in that the images don't have an src attribute. Instead, they use data-src which does not comply with the HTML5 standard - but works non the less.
Perhaps this widget will be a saving grace for those too lazy to optimise their images or too egotistical to limit the number of images per page!

Widget Settings

The widget settings are similar to all the other slider widgets and only a couple of items need any mention.
There are two controls for adding padding to the container - one for the top, left and right padding and the other for the bottom padding. If captions are displayed, the bottom padding should be set to zero. Otherwise, it should be set to the same value as the rest of the padding.
There is a checkbox for hide/show the navigation arrows. The slideshow will work via swiping on touch devices and grab and drag on computers so the arrows are optional.
It is possible for the slider to show two or more images at once so it can be used as a carousel too.
The default transition is slide which is normal for use on touch devices. A fade transition is available as an alternative for use on the full version of the site. The transition time is adjustable and is expressed in tenths of a second.

This widget is included in the Sliders widget pack.