Désactivez le LazyLoad sur des images spécifiques

Dans cette documentation

Remarque : toutes les méthodes d'exclusion peuvent être utilisées pour les images d'arrière-plan ainsi que pour les images standard.

WP Rocket 3.8+

À partir de WP Rocket 3.8, vous trouverez un champ dans les réglages du plugin pour exclure les images et les iframes du LazyLoad :

Pour exclure une image, vous pouvez utiliser n'importe quel mot-clé du nom de fichier de l'image, de sa classe CSS ou du nom de domaine (pour les images hébergées en externe).

Exemple

Si vous souhaitez exclure l'image suivante : 

<img src="http://www.example.org/wp-content/uploads/daniele-riggi-635135-unsplash.jpg" class="attachment-full size-full" />

Vous pouvez utiliser l'un des éléments suivants :

  • daniele-riggi-635135-unsplash.jpg
  • attachment-full size-full - cela exclura toutes les images avec ces deux classes
  • attachment-full ou size-full -  cela exclura les images avec l'une ou l'autre classe spécifique
  • -unsplash - cela exclura également toute autre image avec -unsplash dans le nom de fichier

Versions de WP Rocket antérieures à 3.8

Les méthodes suivantes sont rétrocompatibles et continueront de fonctionner.

Désactiver le LazyLoad sur une image

Si vous voulez désactiver le LazyLoad sur une image en particulier, c’est simple.
Vous pouvez le faire en ajoutant :

  • soit l’attribut data-skip-lazy
  • soit la class skip-lazy

à la balise HTML img:

<img src="my-image.jpg" data-skip-lazy="" alt="" width="100" width="100" />
<img src="my-image.jpg" class="skip-lazy" alt="" width="100" width="100" />

Ceux-ci ne sont sont disponibles qu'à partir de la version 3.5 de WP Rocket et font partie d'une coopération entre les auteurs de plugins des solutions LazyLoad pour normaliser les exclusions. Cela signifie que si vous passez d'un plugin coopérant à l'autre et que vous utilisez l'une de ces méthodes d'exclusion, celle-ci s'appliquera toujours dans la solution alternative.

Si vous utilisiez data-no-lazy, cela fonctionnera toujours, mais pour WP Rocket seulement.

Désactiver le LazyLoad sur une class image

Vous pouvez aussi cibler une class spécifique à exclure du LazyLoad en utilisant ceci :

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="divi-slider"';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

Dans $attributes, la class doit être rigoureusement identique au markup HTML. Par example si la class attribuée à l'image est la suivante :

class="attachment-post-thumbnail size-post-thumbnail wp-post-image"

Vous devez spécifier tout les attributs, comme ceci :

$attributes[] = 'class="attachment-post-thumbnail size-post-thumbnail wp-post-image"';

Désactiver le LazyLoad par source d'image

Vous pouvez aussi cibler une image en fonction de sa src, permettant ainsi d'exclure des images hébergées sur d'autres domaines du LazyLoad. Dans l'exemple ci-dessous, les images servies par wp.com seront exclues du LazyLoad :

function rocket_lazyload_exclude_src( $src ) {
	$src[] = 'wp.com';

	return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );

Désactiver le Lazyload sur les avatars

Si vous souhaitez désactiver le Lazyload sur tous les avatars de votre site web, vous pouvez le faire en ajoutant ce code dans le fichier functions.php de votre thème, par exemple.

remove_filter( 'get_avatar', 'rocket_lazyload_images', PHP_INT_MAX );
Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.