What it does
When a large display of e.g. many thumbnails or many images in a filmstrip are potentially visible, only the ones that are actually inside the viewport c.q. browser window will be loaded from the server. As soon as other images become inside the viewport e.g. by scrolling, the images will be loaded from the server. This speeds up building up the initial display of the page.
How to activate
Table IV-A19 of the Photo ALbums -> Settings admin page has a checkbox called Lazy load Load photos from the server at the moment they will show up.
Tick the box.
How it is implemented
The way this is achieved is as smart as simple: On building up the page content, wppa
<img> tags do not contain the
src="..." attribute, but the
data-src="..." attribute containing the images url.
On the events DOMContentLoaded, resize, scroll, orientationchange and a few others, the function
wppaMakeLazyVisible() is called that replaces the attribute
src with the same url for those images that became (partially) 'in sight'.
This immediately causes the images to be loaded. The
data-src attribute is removed, so the check and creation of the src attribute happens only once for each lazy load image.
[wppa type="thumbs" album="205" size="300" align="center"]