Lazy-load plugin

Support Plugins
1

Using the lazy-load plugin within my site to load some images into a Page. I am using the ![](/images/...) {.img-fluid} to reference the image.

However the image does not show, only the text/title of the image.

If I remove the following block from lazy-load.php though the images do show…

$img_srset = $image->getAttribute("srcset");
                    $image->setAttribute("data-src", $img_src);
                    $image->setAttribute("data-srcset", $img_srset);
                    $image->removeAttribute("src");
                    $image->removeAttribute("srcset");

With the block in place the image src is being written as data-src and without it the src is written as src.

Obviously, I shouldn’t need to alter the underlying php, so How do I stop or change the src attribute from being written as data-src…?

2

If I remember correctly, that plugin is based on Lazy-Load.js. The way it’s supposed to work is when the script detects the item in viewport (or within the offset), it swaps the data-src into the src. You don’t want it to be on src by default (you can have a placeholder) because those will be processed by the browser and downloaded on page load.

From the sounds of it, the script isn’t firing on these elements. Did you verify that .img-fluid is the trigger class? You could try temporarily adding some console.logs to the relevant script .js so that you get some ideas on what is happening and when.

3

take a look here: [SOLVED] Lazyloading images with data-src and data-srcset

no need for the lazyload plugin :slight_smile: