Chrome于6月添加了对加载属性的支持,但不适用于我。
不在视口(viewport)中时正在加载图像。

  • My network info in DevTools
  • 用户代理: 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&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>
    


  • 您能告诉我,我做错什么了吗,或者此属性是原始属性并且无法正常工作?

    最佳答案

  • Chrome 75:您需要使用以下标志(more details)启用延迟加载,然后重新启动浏览器以使其生效:
  • chrome://flags/#enable-lazy-image-loading
    chrome://flags/#enable-lazy-frame-loading
    
  • Chrome 76+:默认情况下,本机延迟加载(source)可用。
  • 09-17 14:45
    查看更多