六月份Chrome增加了对loading属性的支持,但对我来说不起作用。当图像不在viewport中时,它正在加载。
- 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…</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>
字符串
你能告诉我,我做错了什么,或者这个属性是原始的,不工作?
4条答案
按热度按时间k97glaaz1#
字符串
dzhpxtsq2#
图片应包含维度属性
正如这里提到的:https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
虽然这不是必要的,但需要或期望在图像上指定维度属性,因为如果没有指定维度,可能会发生布局偏移。从而导致意外行为。
浏览器需要知道图像的尺寸,以便在页面上为它们保留足够的空间。
cigdeys33#
我运行了你的测试页面,
[干预]图像延迟加载并替换为占位符。加载事件延迟。参见https://crbug.com/846170
我在网上找到了一些lazyload的例子,当我打开他们的演示页面时,仍然出现了这个提示。
“我觉得是因为这个属性还有BUG,毕竟还是一个讨论中的属性。”
r1zk6ea14#
如果要删除警告,请尝试添加
loading=“auto”
标签属性