jetpack_lazy_images_blacklisted_classes

Allow plugins and themes to tell lazy images to skip an image with a given class.

Source file: modules/lazy-images/lazy-images.php

View in GitHub

Parameters

An: (array) An array of strings where each string is a class.

Changelog

Since: Jetpack 5.9.0

Notes

Have a note to contribute?

Have a note to contribute? Cancel reply

Comments

Rodolfo says:

3 October 2018 at 9 h 03 min
Here’s a quick example to exclude your logo (given the logo’s class “custom-logo”) from lazy loading:
```
add_filter( 'jetpack_lazy_images_blacklisted_classes', 'bbloomer_exclude_custom_logo_class_from_lazy_load', 999, 1 );
               
function bbloomer_exclude_custom_logo_class_from_lazy_load( $classes ) {
    $classes[] = 'custom-logo';
    return $classes;
}   
```
Reply
- mygoldenthimble says:
  
  29 August 2019 at 16 h 05 min
  
  How about if I want to exclude all woocomerce pictures??? But still lazy load anywhere else on my site?
  
  Reply
  - Adam says:
    
    29 August 2019 at 17 h 32 min
    
    Hi there!
    
    How about if I want to exclude all woocomerce pictures??? But still lazy load anywhere else on my site?
    
    I don’t think WooCommerce adds a single class to all images it touches, but an alternative might be to use this filter:
    
    https://developer.jetpack.com/hooks/lazyload_is_enabled/
    
    … to dynamically disable lazy loading on any page where the body tag has the class “woocommerce”.
    
    This code is 100% untested, but it will get you started:
    
    https://pastebin.com/raw/CRzNEPpR
    
    Thanks!
- Erez Speiser says:
  
  3 July 2020 at 7 h 22 min
  
  Thanks to that code snippet. It was most helpful!. Can you share what is the syntax if I want to exclude more than one class? Thanks
  
  Reply
  - Jeremy says:
    
    4 July 2020 at 14 h 41 min
    Hi there,
    
    One way to exclude multiple classes would be to adjust the above example like so:
    
    function bbloomer_exclude_custom_logo_class_from_lazy_load( $classes ) { $classes[] = 'custom-logo'; $classes[] = 'second-class'; $classes[] = 'third-class'; return $classes; }
    
    Best!
Loayon Lou says:

26 September 2019 at 9 h 26 min

Hi! This works but still it adds noscript tag which gives w3c error when I’m using picture tag http://prntscr.com/pb6oys. How will I fix it?

Reply
- Jeremy Herve says:
  
  27 September 2019 at 10 h 29 min
  
  It’s currently not possible to remove those noscript tags. We’re tracking this issue here. I would recommend that you subscribe to the issue to follow our progress on this.
  
  Reply
Sandra says:

18 February 2020 at 12 h 07 min

I really need help creating a snippet for turning off Lazy Images only on the homepage.

Reply
- Dat Hoang says:
  
  19 February 2020 at 3 h 34 min
  
  You need to use this filter for this purpose https://developer.jetpack.com/hooks/lazyload_is_enabled/
  
  To disable Lazy Images in the homepage only, you can try this code.
  
  Reply