Chrome于6月添加了对加载属性的支持,但不适用于我。
不在视口(viewport)中时正在加载图像。
<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>
您能告诉我,我做错什么了吗,或者此属性是原始属性并且无法正常工作?
最佳答案
chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading