为了账号安全,请及时绑定邮箱和手机立即绑定

Chrome 本机图像延迟加载仅在 iframe 内有效

Chrome 本机图像延迟加载仅在 iframe 内有效

沧海一幻觉 2023-12-11 10:12:06
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中效果很好(您可以通过滚动和开发者工具 -> 网络检查图像延迟加载)
查看完整描述

2 回答

?
喵喔喔

TA贡献1735条经验 获得超5个赞

我遇到了同样的问题,但只有当图像足够接近视口时才会出现。否则它会被延迟加载。


请尝试在 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>

如果没有信心,我可以认为这是一个功能,而不是一个错误。某种优化。例如,当用户足够快地向上/向下滚动时,它会减少看到图像正在加载的机会。


查看完整回答
反对 回复 2023-12-11
?
PIPIONE

TA贡献1829条经验 获得超9个赞

就我而言,我必须width在内联或在 CSS 文件中显式设置属性。

其实你可以尝试一下原来的demo。如果您在此演示中删除宽度和高度属性,则 Chrome 上的延迟加载将不起作用。


查看完整回答
反对 回复 2023-12-11
  • 2 回答
  • 0 关注
  • 117 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信