Whenever visitor scrolls down the page until the image is in the viewport, the src attribute value will be replaced with the actual image link. I believe this is a good implementation, visitor will not lose their bandwidth since their browser only loads what they can see.
Until someday, I realized that all images below the viewport are all loaded to the browser. Then, I debug my site, disabling, enabling plugins and themes, and I found out that the GP Premium “Menu Plus” module is the cause.
Whenever it’s enabled, the src attribute value almost instantly replaced from svg to the actual image link. Even before the images is on the viewport.
You can replicate the problem by installing GP Premium and Autoptimize. Enable “Menu Plus” in GP Premium, then enable the Image Lazy Load function in autoptimize setting, you can find it on the “Image” tab.
Right now I’m still using the Menu Plus, since it looks so good and so simple to setup. However I’m wishing we can have a solution for the problem above.