LazyLoading

Summary: Instruct browsers to only load pictures when they would be visible on the screen
Version: 20220323
Prerequisites: Recent browser
Status: Beta
Maintainer: Petko
License: Public domain
Categories: Images, Uploads, Gallery, PHP80
Users: +1 (view / edit)
Discussion: LazyLoading-Talk?

Instruct browsers to fetch pictures when they are about to appear on the screen.

Description

Pictures files have usually much larger filesizes than hypertext, and a web page with many pictures may take a long time to load. This can be both inconvenient to visitors, and can downgrade the page rating in search engines.

"Lazy loading" is a technique where browsers make a request for a picture only when it is already on the screen or about to scroll into view. Pictures "below the fold" or in collapsed sections are not fetched from the server until they are about to become visible.

In the past, this technique required a placeholder image and a JavaScript function that would track the scroll position of every picture in the page relative to the viewport, and would rewrite the image src attribute when needed.

Recent browsers support this feature natively with a new HTML5 loading attribute. This recipe makes use on the native feature.

This page has the feature enabled and many pictures at the bottom. Open your Web developer tools (F12) and scroll down slowly to observe the delayed fetch requests.

Configuration

Add to local/config.php:

## core images
$ImgTagFmt= '<img src="$LinkUrl" alt="$LinkAlt" title="$LinkAlt" loading="lazy" />';

If you use Cookbook:Mini, to make thumbnails load when in viewport:

## Lazy Cookbook.Mini thumbnails
$Mini['ImgFmt'] = '<img class="mini" src="%1$s" title="%2$s" alt="%2$s" border="0" loading="lazy" />';

If you use Cookbook:ThumbList, to make thumbnails load when in viewport:

## Lazy Cookbook.ThumbList thumbnails
$ThumbList['_tmpl']['imgwrap'] = '<img class="thumbs" src="?u" title="%1$s" alt="%1$s" %2$s border="0" loading="lazy" />';

Usage

There should be no change to your workflows.

Notes

To see which browsers natively support the feature, check https://caniuse.com/loading-lazy-attr.

If you have custom markup or other recipe producing embedded images, you may want to update the HTML format for the <img/> tag in a similar manner.

To do / some day / maybe

Maybe include a polyfill for old browsers.

Change log / Release notes

  • 20220323 Recipe published, ready to be tested.

See also

Contributors

Recipe written and maintained by Petko.

Comments

See discussion at LazyLoading-Talk?

Sandbox

These are screenshots from Skins:SkinsGallery.

Collapsed section, click to open
ABitModern
Academian
Adapt
Alalike
Amber
Barthelme
BeeblebroxNetGila
BitterLemon
Blix
Blog
BlueBerry
Blue Freedom
BlueFur
BlueHead
Blues
Boira
Bonny
Bs-001
Bs-002
Choice
Cinnamon
Colorimetry
DropDown
Drop Shadow
Enlighten
Equilibrium
Evolver
FixFlow
Flexi
Flckr
Gemini
GlossyHue
Grayness
Grease
Green
IPMWiki
JHMP
JH
Kaylen
Lean
Lens
Light
Lines
Maguila
Marathon
Marble
Marinee
Minimous
Monobook
Neat
Netstreams
Neutral
NewsPaper
Night
NotSoSimple
Papyrus
Parchment
PhotoGallery
PhpNet
Plain
PmWiki2Bars
PmWikiV1
PukkaFloat
Recurve
RoseTrellis
Rounded
Royale
SchlaeferTwo
Simpla
Simple
SimpleTab
Sinorca
Skidoo
Skittlish
Soma
SomethingCorporate
SsofbJoomlaRhuk skin for PmWiki
Steamport
Stripped
Technobabble
TextPattern
Triad
Trish
UselessTuesday
WikiLove

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.