vendredi 14 juin 2019

Native lazy-load in Chrome

In June Chrome added support of the loading attribute, but it does not work for me. Image is loading when this isn't in viewport.

  1. My network info in DevTools

  2. User-agent: Chrome/75.0.3770.80

  3. Enabled lazy image loading in chrome://flags

  4. My test page:

    <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>
    
    

Can you tell me, am i doing something wrong or this attribute is raw and not working?




Aucun commentaire:

Enregistrer un commentaire