manifest / performance / lazy-load-images

Lazy Load Images

Lazy load images, with a color block SVG placeholder.

by Kyle Reicks · github.com/kylereicks/lazy-load-images · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/kylereicks/lazy-load-images/archive/refs/heads/master.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/kylereicks/lazy-load-images ↗

Lazy Load Images with SVG Placeholders

Add SVG image placeholders for images and load the full image when it comes into view.

Key Features

Generate SVG placeholders with color data saved when the image is added or updated.
Use Intersection Observers to determine when an image is in view.
As a fallback load all images immediately when IntersectionObserver is not available.
Load ES6 scripts via script type module and nomodule.

Examples

Full image

Color Block Grid (Default)

Block Grid Image

add_filter( 'lazy_load_images_svg_placeholder_style', function( $style, $image, $image_attr, $attachment_id ) {
    return 'color-block-grid';
}, 10, 4 );

Color Block Horizontal

add_filter( 'lazy_load_images_svg_placeholder_style', function( $style, $image, $image_attr, $attachment_id ) {
    return 'color-block-horizontal';
}, 10, 4 );

Average Color

add_filter( 'lazy_load_images_svg_placeholder_style', function( $style, $image, $image_attr, $attachment_id ) {
    return 'average-color';
}, 10, 4 );

Average Grayscale

add_filter( 'lazy_load_images_svg_placeholder_style', function( $style, $image, $image_attr, $attachment_id ) {
    return 'average-grayscale';
}, 10, 4 );