### [How to use JetPack Lazy Load and Envira's Lazy Load together](https://enviragallery.com/docs/how-to-use-jetpack-lazy-load-and-enviras-lazy-load-together/)

**Published:** February 1, 2019
**Author:** Mihai Ceban

**Content:**

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.

**Heads up!**
This article includes PHP and HTML customization for resolving a Lazy Loading conflict in Envira Gallery. While we provide this code as a courtesy, we do not offer support for customizations or third-party development services.

---

### **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](https://enviragallery.com/docs/how-to-add-custom-php-or-javascript-for-envira-gallery/) 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](https://enviragallery.com/docs/how-to-track-views-shares-and-downloads-of-each-gallery-image/ "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.

![Disable the JetPack Lazy Loading for images](https://enviragallery.com/wp-content/uploads/2018/06/envira-disable-jetpack-lazy-loading.jpg "Disable the JetPack Lazy Loading for images - Envira Gallery")---

##### 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.

**Categories:** Functionality

---