built-in lazy loading

, ,

lazy loading

O Google já tinha publicado um documento em janeiro de 2018 descrevendo o suporte a lazy-loading (carga tardia) de imagens e iframes que estão fora seção visível da página, e em março o Firefox também reportou que vai implementar. A equipe do Safari já tinha comentado que desejava implementar esta funcionalidade e com o Edge da Microsoft indo para Chromium , todos os principais navegadores vão implementae esta funcionalidade. O chrome 73 já tem esta funcionalidade de forma experimental para ativar basta acessar chrome://flags .

Então como podemos utilizar o lazy loading, bem é simples:

1
2
<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="myframe.html" loading="lazy"></iframe>

O Atributo loading

O atributo loading permite um navegador retardar a carga de imagens e iframes que estejam fora da área visível até o usuário mover o scroll próximo de um atributo loading que pode ter um destes atributos:

  • lazy: o elemento com este valor é um candidato a lazy-loading
  • eager: o elemento não deve sofrer um lazy-loading
  • auto: o navegador decide

Verificando se a funcionalidade está disponível

Para saber se a funcionalidade está disponível em seu browser é só verificar :

1
2
3
4
5
6
7
8
<script>
if ('loading' in HTMLImageElement.prototype) { 
    // Browser supports `loading`..
} else {
   // Fetch and apply a polyfill/JavaScript library
   // for lazy-loading instead.
}
</script>

Simulando o lazy-loading com javascript

Caso você queira simular o comportamento do lazy-loading , este código javascript vai ajudar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Carga normal -->
<img src="hello.jpg" alt=".."/>

<!-- Carregando as demais imagens usando lazy-loading -->
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>

<script>
(async () => {
    const images = document.querySelectorAll("img.lazyload");
    if ('loading' in HTMLImageElement.prototype) {
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Dinamicamente importando a library LazySizes
        const lazySizesLib = await import('/lazysizes.min.js');
        // Inicializando LazySizes (reads data-src & class=lazyload)
        lazySizes.init(); // lazySizes funciona de forma global.
    }
})();
</script>

Para saber mais

Native image lazy-loading for the web!
Blink LazyLoad
After Chrome, Firefox will also support off-screen image lazy loading
lazysizes library