6 月,Chrome 添加了对loading 属性 的支持,但它对我不起作用。 图像不在视口(viewport)中时正在加载。
用户代理:Chrome/75.0.3770.80
在 chrome://flags
中启用延迟图像加载我的测试页:
<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 75:您需要使用以下标志 ( more details ) 启用延迟加载 + 重新启动浏览器才能使它们生效:
chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading
- Chrome 76+: native 延迟加载默认可用 (source)。
关于javascript - Chrome 中的原生延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56594137/