Chrome 81、FF 75(最新版本(
在Chrome原生镜像中，延迟加载只能在iframe中工作。为什么？在FF工作良好
page1.htm (延迟加载在Chrome中不起作用，但在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(通过iframe的延迟加载在Chrome和FF中都有效(：
<iframe src="page1.htm">
是Chrome的bug吗？在FF中，效果良好
(您可以通过滚动和开发者工具->网络来检查图像延迟加载(
我也遇到了同样的问题，但只有当图像离视口足够近时。否则，它将被懒散地加载。
请尝试在Chrome中打开这个最小的工作示例，然后慢慢向下滚动页面。当视口大致位于页面中间时，将加载图像。
<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>
毫无疑问，我可以认为这是一个功能，而不是一个bug。某种优化。例如，当用户足够快地向上/向下滚动时，它减少了看到图像加载的机会。
在我的情况下，我必须在内联或CSS文件中显式设置width属性。
事实上，您可以尝试原始演示。如果你在这个演示中删除宽度和高度属性，Chrome上的懒惰加载将不起作用。