• View
• Edit
• History
• Attach
• Print
• Backlinks

LazyLoading

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