Chrome native image lazy loading works inside iframe only

user_13291608 0
Viewed 533

Chrome 81, FF 75 (latest for today)

in Chrome native image lazy loading works inside iframe only. why? in FF works good

page1.htm(lazy loading does not work in Chrome but works good in FF):

<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<img src="https://wallpaperplay.com/walls/full/5/e/a/218959.jpg" loading="lazy">

page2.htm(lazy loading via iframe works both in Chrome and in FF):

<iframe src="page1.htm">

is it Chrome's bug? in FF it works good

(you can check image deferred loading via scrolling and Developers tools -> Network)

google-chrome lazy-loading iframe image html
2 Answers

I've got the same issue but only when the image is close enough to the viewport. Otherwise it is being loaded lazily.

Please try to open this minimal working example in Chrome and slowly scroll the page down. The image will be loaded when the viewport is approximately in the middle of the page.

<html>
    <head>
        <style>
            .dummy {
                height: 700vh;
            }
        </style>
    </head>
    <body>
        <div class="dummy"></div>
        <img src="https://yasminfinch.com/wp-content/uploads/2015/03/Hello-icon-300x212.jpg" loading="lazy">
    </body>
</html>

Without confidence, I can suggest it is a feature, not a bug. Some kind of optimization. It reduces the chance to see the image is loading when, for example, user scrolls up/down quickly enough.

user_55981940

In my case, I had to explicitly set width attribute either inline or in CSS file.

In fact, you can try the original demo. Lazy loading on Chrome will not work if you remove the width and height attributes in this demo.

user_38394650
Related