magento-2-lazy-load
magento-2-lazy-load copied to clipboard
Exclude image classes not working
Hi, First of all I would like to thank you for your extension.
I have a problem with my home slider where images have a "noLazyLoad" class but there are still managed through the lazy loader module. Here is my setting for excluding classes where I added "noLazyLoad" : "loaded, notlazy, noLazyLoad"
Here is my html code :
<div class="home-slider-container">
<div class="home-slider">
<div class="home-slider-item">
<img src="{{media url=wysiwyg/ED.webp}}" alt="ED" class="pagebuilder-mobile-hidden noLazyLoad" />
<img src="{{media url=wysiwyg/ED_mobile_webp}}" alt="ED" class="pagebuilder-mobile-only noLazyLoad" />
</div>
<div class="home-slider-item">
<a href="/marque/leecooper" title="Marque Lee Cooper">
<img src="{{media url=wysiwyg/LE.webp}}" alt="Marque Lee Cooper" class="pagebuilder-mobile-hidden noLazyLoad" />
<img src="{{media url=wysiwyg/LE_mobile.webp}}" alt="Marque Lee Cooper" class="pagebuilder-mobile-only noLazyLoad" />
</a>
</div>
</div>
</div>
<script type="text/javascript">
require(['jquery', 'slick'], function($, slick) {
$('.home-slider').slick({
autoplay: true,
dots: true
});});
</script>
After debugging it seams that the method "addLazyLoadImage" in Plugin/LazyResponse.php does not detect the image classes correctly.
Here my working solution where I changed the regexp and the way of getting the classes.
public function addLazyloadImage($content, $placeholder)
{
return preg_replace_callback(
'/<img\s+(?![^>]*?\bdata-src=)([^>]+)>/',
function($match) use ($placeholder) {
// Vérifie si l'attribut data-src existe déjà.
if (stripos($match[0], ' data-src="') !== false) {
return $match[0];
}
// Initialisation d'une variable pour les classes d'image.
$class = '';
// Vérification de l'existence de l'attribut class.
if (preg_match('/class="([^"]*)"/', $match[0], $classMatch)) {
$class = $classMatch[1];
if ($this->isExclude($class)) {
return $match[0];
}
// Ajoute lazyload à la classe existante
$lazy = preg_replace('/class="([^"]*)"/', 'class="$1 lazyload"', $match[0]);
} else {
// Ajoute la classe lazyload si aucune classe n'est présente
$lazy = str_replace('<img ', '<img class="lazyload" ', $match[0]);
}
// Remplacer src par data-src et ajouter le placeholder à src.
return preg_replace('/src="([^"]+)"/', 'src="' . $placeholder . '" data-src="$1"', $lazy);
},
$content
);
}