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)

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 );