How to use JetPack Lazy Load and Envira’s Lazy Load together

If you use both the Envira Gallery plugin and the JetPack plugin, you might run into a problem. Both plugins have a feature called Lazy Load, which helps your website load faster by only loading images when a visitor scrolls down to see them.

The problem is that sometimes these two features can conflict with each other. This can cause your gallery images to not load correctly.

The solution is simple: we need to tell JetPack to ignore the images that Envira Gallery is already handling. This way, Envira can lazy load your galleries, and Jetpack can lazy load everything else on your site, and they will work together.

Adding the Code Snippet

To allow the JetPack filter to work on all images except Envira images,  you’ll need to apply a custom filter. Follow the instructions in this document to safely add PHP code to your WordPress site.

/*Adding a JetPack Lazy Load Filters
* 
* @link https://enviragallery.com/docs/how-to-use-jetpack-lazy-load-and-enviras-lazy-load-together/
*/

add_filter('envira_gallery_indexable_image_css', 'jp_envira_gallery_indexable_image_css', 10, 2 );
function jp_envira_gallery_indexable_image_css( $css, $id ) {
    $css .= 'skip-lazy';
    return $css;
}

add_filter('jetpack_lazy_images_blacklisted_classes', 'envira_jetpack_lazy_images_blacklisted_classes', 999, 1 );
function envira_jetpack_lazy_images_blacklisted_classes( $blacklisted_classes ) {
    $blacklisted_classes[] = 'envira-gallery-image';
    $blacklisted_classes[] = 'skip-lazy';
    return $blacklisted_classes;
}

/* trick Jetpack into thinking there's already a lazy load src for <noscript> images, so they don't appear */
add_filter('envira_gallery_output_noscript', 'jp_envira_gallery_output_noscript', 999, 2 );
function jp_envira_gallery_output_noscript( $html, $gallery_data ) {
    $html = str_replace('<img ', '<img data-lazy-src="" ', $html);
    return $html;
}

Once implemented, Envira Gallery images should properly display and use the default Lazy Loading functionality while JetPack plugin’s Lazy Loading is active.

If you would like to extend Envira galleries in other ways, check out this tutorial on how to How to Track Views, Shares, and Downloads of Each Gallery Image.

FAQs

Can I just disable JetPack’s Lazy Loading?

A: Certainly! Navigate to JetPack » Settings, under the Performance & speed you’ll have an option to turn the Enable Lazy Loading for images on or off.

Will this work for Envira Lite too?

A: No, currently this is only for the Envira premium licenses. We’ll update this doc when Envira Lite has this filter capability in the near future.