magento-2-lazy-load icon indicating copy to clipboard operation
magento-2-lazy-load copied to clipboard

Exclude image classes not working

Open eInyzant opened this issue 11 months ago • 0 comments

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
    );
}

eInyzant avatar Mar 25 '24 08:03 eInyzant