Tagged: lazyloading
Hello, in the Footer is a widget to display an image. Google PageSpeed says “Defer offscreen images”.
Image CSS Class is “footerlogo avia-img-lazy-loading-9144”. How do I lazy load the image?
Thanks.
Hey Mark,
The class avia-img-lazy-loading means it is lazy loaded, it also has the class lazyloaded from your wprocket plugin which is also trying to lazy load it.
When I test the image is not added to the DOM until the section is in view.
Best regards,
Mike
Thanks for the reply.
So why isn’t the image listed as deferred by PageSpeed?
Thank you for your help.
Hi,
Perhaps it is an error in the test, if you check your page with the Dev Tools inspector with the image not scrolled into view you can find the image placeholder and the class avia-img-lazy-loading-9144 but the image is not loaded:
then scroll down to the image and just as it comes into view you will see the image added to the DOM:
Please note that if you use the Ctrl+F to search for the class the page will automatically scroll the element into view, so once you find the place in the DOM scroll the window up so the image is a good way out of view, then reload the page and watch the DOM as you scroll down. You will see the image added to the DOM like in my screenshot above.
Best regards,
Mike