Chrome中的本地延迟加载

ldfqzlk8  于 11个月前  发布在  Go
关注(0)|答案(4)|浏览(117)

六月份Chrome增加了对loading属性的支持,但对我来说不起作用。当图像不在viewport中时,它正在加载。

  1. My network info in DevTools
    1.用户代理:Chrome/75.0.3770.80
    1.在Chrome://flags中启用延迟图片加载
    1.我的测试页面:
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Way to go&hellip;</p>

<h4>Lazy cat loaded lazily</h4>
<p>If your browser supports native lazy-loading, it loads the first 2 kB of the image in order to display a
    placeholder. Then, it loads the full-size image.</p>
<p>If your browser does not support native lazy-loading, it loads the lazysizes library and sets the
    <code>img</code>'s <code>src</code> to a low-quality image placeholder, which is also around 2 kB in size. Then,
    it loads the full-size image.</p>
<div class="alert alert-warning">The native lazy-loading's 2 kB range request do not work from within Codepen.
    However, you can make this work by copying this to an empty HTML file on your computer.</div>
<!-- <img src="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=500"
    loading="lazy" alt="Lazy cat loaded lazily"> -->
<img src="images/article/photo.jpg" loading="lazy" alt="Lazy turtle">

<script>
    if ('loading' in HTMLImageElement.prototype) {
        console.log('YES');
    } else {
        console.log('NO');
    }
</script>

字符串
你能告诉我,我做错了什么,或者这个属性是原始的,不工作?

k97glaaz

k97glaaz1#

  • Chrome 75:您需要启用延迟加载,并使用以下标志(more details)+重新启动浏览器才能使其生效:
chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading

字符串

  • Chrome 76+:默认情况下可使用本机延迟加载(source)。
dzhpxtsq

dzhpxtsq2#

图片应包含维度属性

正如这里提到的:https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
虽然这不是必要的,但需要或期望在图像上指定维度属性,因为如果没有指定维度,可能会发生布局偏移。从而导致意外行为。
浏览器需要知道图像的尺寸,以便在页面上为它们保留足够的空间。

cigdeys3

cigdeys33#

我运行了你的测试页面,
[干预]图像延迟加载并替换为占位符。加载事件延迟。参见https://crbug.com/846170
我在网上找到了一些lazyload的例子,当我打开他们的演示页面时,仍然出现了这个提示。
“我觉得是因为这个属性还有BUG,毕竟还是一个讨论中的属性。”

r1zk6ea1

r1zk6ea14#

如果要删除警告,请尝试添加
loading=“auto”
标签属性

相关问题