vanilla lazyload Download - vanilla lazyload Download do código-fonte

LazyLoad é um script leve (2,4 kB) e flexível que acelera seu aplicativo da web , adiando o carregamento de suas imagens abaixo da dobra, SVGs animados, vídeos e iframes para quando eles entrarem na janela de visualização . Ele é escrito em JavaScript "vanilla" simples, aproveita a API IntersectionObserver, oferece suporte a imagens responsivas, otimiza seu site para conexões mais lentas e pode permitir carregamento lento nativo. Veja todos os recursos para mais.

➡️ Vá para: ?‍ Primeiros passos - HTML - ?‍ Primeiros passos - Script - ? Receitas - Demonstrações - ? Dicas e truques -? API - ? Todos os recursos comparados

Ama este projeto? ? Compre-me um café!

?‍ Primeiros passos - HTML

Para fazer com que seu conteúdo seja carregado pelo LazyLoad, você deve usar alguns atributos data- em vez dos atributos reais. Exemplos abaixo.

Imagem preguiçosa:

 < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />

Imagem preguiçosa com espaço reservado de baixa qualidade:

 < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />

Imagem responsiva preguiçosa com `srcset` e `sizes` :

 < img
  alt =" A lazy image "
  class =" lazy "
  data-src =" lazy.jpg "
  data-srcset =" lazy_400.jpg 400w, 
    lazy_800.jpg 800w "
  data-sizes =" 100w "
/>

Para ter um espaço reservado de baixa qualidade, adicione o atributo src apontando para uma versão muito pequena da imagem. Por exemplo src="lazy_10.jpg" .

Imagem responsiva lenta com suporte de alto dpi usando a tag `picture` :

 < picture >
  < source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
  < source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
  < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture >

Para ter um espaço reservado de baixa qualidade, adicione o atributo src apontando para uma versão muito pequena da imagem à tag img . Por exemplo src="lazy_10.jpg" .

Imagem responsiva lenta com seleção automática de formato WebP , usando a tag `picture` :

 < picture >
  < source
    type =" image/webp "
    data-srcset =" lazy_400.webp 400w, 
      lazy_800.webp 800w "
    data-sizes =" 100w "
  />
  < img
    alt =" A lazy image "
    class =" lazy "
    data-src =" lazy.jpg "
    data-srcset =" lazy_400.jpg 400w, 
      lazy_800.jpg 800w "
    data-sizes =" 100w "
  />
</ picture >

Para ter um espaço reservado de baixa qualidade, adicione o atributo src apontando para uma versão muito pequena da imagem à tag img . Por exemplo src="lazy_10.jpg" .

Imagem de fundo preguiçosa

NOTA IMPORTANTE : Para exibir imagens de conteúdo em suas páginas, use sempre a tag img . Isso beneficiaria o SEO e a acessibilidade do seu site. Para entender se suas imagens são de conteúdo ou de fundo, pergunte-se: “o usuário do meu site gostaria de ver essas imagens ao imprimir a página?”. Se a resposta for “sim”, então suas imagens são imagens de conteúdo e você deve evitar usar imagens de fundo para exibi-las.

Imagem de fundo única:

 < div class =" lazy " data-bg =" lazy.jpg " > </ div >

Fundo único, com suporte para tela HiDPI:

 < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div >

Vários planos de fundo:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Vários planos de fundo, suporte para tela HiDPI:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc) "
  data-bg-multi-hidpi =" url([email protected]),
    url([email protected]),
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Planos de fundo com `image-set` :

 < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div >

Vários fundos com `image-set` :

 < div
  class =" lazy "
  data-bg-set ="
    url('[email protected]') 1x, url('[email protected]') 2x | 
    url('[email protected]') 1x, url('[email protected]') 2x
  "
>
  ...
</ div >

SVG animado preguiçoso

 < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >

Vídeo preguiçoso

 < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
  < source type =" video/mp4 " data-src =" lazy.mp4 " />
  < source type =" video/ogg " data-src =" lazy.ogg " />
  < source type =" video/avi " data-src =" lazy.avi " />
</ video >

Observe que o pôster do vídeo também pode ser carregado lentamente.

Iframe preguiçoso

 < iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >

Ama este projeto? ? Compre-me um café!

?‍ Primeiros passos - Script

A versão mais recente recomendada do LazyLoad é 19.1.3 . Observe que se precisar oferecer suporte ao Internet Explorer 11, você precisará usar a versão 17.9.0 ou inferior.

Entenda rapidamente como atualizar de uma versão anterior lendo o guia prático de atualização.

A maneira simples e fácil

A maneira mais fácil de usar o LazyLoad é incluir o script de um CDN.

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >

OU, se preferir importá-lo como um módulo ES:

 < script type =" module " >
  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >

Então, no seu código javascript:

 var lazyLoadInstance = new LazyLoad ( {
  // Your custom settings go here
} ) ;

Para ter certeza de que o DOM para seu conteúdo lento está pronto quando você instancia o LazyLoad, coloque a tag de script logo antes da tag de fechamento </body> .

Se mais DOM chegar mais tarde, por exemplo, através de uma chamada AJAX, você precisará chamar lazyLoadInstance.update(); para fazer o LazyLoad verificar o DOM novamente.

 lazyLoadInstance . update ( ) ;

Usando um script `async`

Se preferir, é possível incluir o script do LazyLoad usando script async e inicializá-lo assim que for carregado.

Para isso, você deve definir as opções antes de incluir o script . Você pode passar:

{} um objeto para obter uma única instância de LazyLoad
[{}, {}] um array de objetos para obter múltiplas instâncias de LazyLoad, cada uma com opções diferentes.

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
</ script >

Em seguida, inclua o script.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

Possivelmente coloque a tag script logo antes da tag de fechamento </body> . Se você não puder fazer isso, LazyLoad poderá ser executado antes que o navegador carregue todo o DOM, e você precisará chamar seu método update() para fazer com que ele verifique o DOM novamente.

Usando um script `async` + obtendo a referência da instância

O mesmo que acima, mas você deve colocar o código addEventListener mostrado abaixo antes de incluir o script async .

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window . addEventListener (
    "LazyLoad::Initialized" ,
    function ( event ) {
      window . lazyLoadInstance = event . detail . instance ;
    } ,
    false
  ) ;
</ script >

Em seguida, inclua o script.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

Agora você poderá chamar seus métodos, como:

 lazyLoadInstance . update ( ) ;

DEMO - SOURCE ← para uma única instância LazyLoad

DEMO - SOURCE ← para múltiplas instâncias do LazyLoad

Instalação local

Se preferir instalar o LazyLoad localmente em seu projeto, você pode!

Usando npm

 npm install vanilla-lazyload

Usando caramanchão

 bower install vanilla-lazyload

Download manual

Baixe um dos últimos lançamentos. Os arquivos que você precisa estão dentro da pasta dist . Se você não sabe qual escolher, use lazyload.min.js ou leia sobre pacotes configuráveis.

Uso local

Se você instalar o LazyLoad localmente, poderá importá-lo como um módulo ES como o seguinte:

 import LazyLoad from "vanilla-lazyload" ;

Também é possível (mas desaconselhável) usar a sintaxe require commonJS.

Mais informações sobre como agrupar LazyLoad com WebPack estão disponíveis neste repositório específico.

Uso com React

Dê uma olhada neste exemplo de uso do React com LazyLoad no Sandbox.

Essa implementação usa os mesmos adereços que você normalmente passaria para a tag img , mas renderiza uma imagem lenta. Sinta-se à vontade para bifurcar e melhorá-lo!

Pacotes

Dentro da pasta dist você encontrará diferentes pacotes.

Nome do arquivo	Tipo de módulo	Vantagens
`lazyload.min.js`	UMD (definição de módulo universal)	Funciona praticamente em qualquer lugar, mesmo em contextos common-js
`lazyload.iife.min.js`	IIFE (expressão de função invocada imediatamente)	Funciona como `<script src="...">` in-page, ~0,5kb menor que a versão UMD
`esm/lazyload.js`	Módulo ES	Exporta `LazyLoad` para que você possa importá-lo em seu projeto usando `<script type="module" src="...">` e um bundler como WebPack ou Rollup

Ama este projeto? ? Compre-me um café!

? Receitas

Esta é a seção onde você pode encontrar códigos prontos para copiar e colar para sua conveniência.

Ocultar texto alternativo e imagem vazia

Caso de uso : quando suas imagens carregadas lentamente mostram o texto alt e o ícone da imagem vazia antes de carregar.

CSS

 img : not ([ src ]) : not ([ srcset ]) {
  visibility : hidden;
}

Só isso, na verdade.

Tratamento de erros de imagem

Caso de uso : quando você deseja evitar a exibição de imagens inexistentes/quebradas em seu site.

JavaScript

 var myLazyLoad = new LazyLoad ( {
  // Other options here...
  callback_error : ( img ) => {
    // Use the following line only if your images have the `srcset` attribute
    img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
    img . setAttribute ( "src" , "[email protected]" ) ;
  }
} ) ;

NOTA: se o erro foi gerado por uma rede inativa (navegador se estiver temporariamente offline), o vanilla-lazyload tentará carregar as imagens novamente quando a rede estiver disponível novamente.

EXEMPLO - API

Conteúdo dinâmico

Caso de uso : quando você deseja carregar imagens lentamente, mas o número de imagens muda na área de rolagem, talvez porque elas são adicionadas de forma assíncrona.

JavaScript

 var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;

DEMO - FONTE - API

Carregamento lento misto nativo e baseado em JS

Caso de uso : você deseja usar a opção use_native para delegar o carregamento de imagens, iframes e vídeos ao mecanismo do navegador onde houver suporte, mas também deseja carregar lentamente imagens de fundo.

HTML

 < img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >

JavaScript

 // Instance using native lazy loading
const lazyContent = new LazyLoad ( {
  use_native : true // <-- there you go
} ) ;

// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
  // DON'T PASS use_native: true HERE
} ) ;

DEMO - FONTE - API

Painéis de rolagem

Caso de uso : quando o contêiner de rolagem não é a janela principal do navegador, mas um contêiner de rolagem.

HTML

 < div class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

JavaScript

 var myLazyLoad = new LazyLoad ( {
  container : document . querySelector ( ".scrollingPanel" )
} ) ;

DEMO - FONTE - API

Se você tiver vários painéis de rolagem, poderá usar a marcação e o código a seguir.

HTML

 < div id =" scrollingPanel1 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

JavaScript

 var myLazyLoad1 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel2" )
} ) ;

DEMO - FONTE - API

Funções preguiçosas

Caso de uso : quando você deseja executar scripts ou funções arbitrárias quando determinados elementos entram na janela de visualização

HTML

 < div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >

 // It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
  foo : function ( element ) {
    element . style . color = "red" ;
    console . log ( "foo" ) ;
  } ,
  bar : function ( element ) {
    element . remove ( element ) ;
    console . log ( "bar" ) ;
  } ,
  buzz : function ( element ) {
    var span = document . createElement ( "span" ) ;
    span . innerText = " - buzz!" ;
    element . appendChild ( span ) ;
    console . log ( "buzz" ) ;
  } ,
  booya : function ( element ) {
    element . classList . add ( "boo" ) ;
    console . log ( "booya" ) ;
  }
} ;

 function executeLazyFunction ( element ) {
  var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
  var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
  if ( ! lazyFunction ) return ;
  lazyFunction ( element ) ;
}

var ll = new LazyLoad ( {
  unobserve_entered : true , // <- Avoid executing the function multiple times
  callback_enter : executeLazyFunction // Assigning the function defined above
} ) ;

Use unobserve_entered para evitar executar a função várias vezes.

É isso. Sempre que um elemento com o atributo data-lazy-function entra na janela de visualização, LazyLoad chama a função executeLazyScript , que obtém o nome da função do próprio atributo data-lazy-function e o executa.

DEMO - FONTE - API

Inicialização lenta de múltiplas instâncias do LazyLoad

Caso de uso : quando você tem muitos contêineres de rolagem horizontal e deseja instanciar uma instância LazyLoad neles, mas somente quando eles entram na janela de visualização.

HTML

 < div class =" horizContainer " >
  < img
    src =""
    alt =" Row 01, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 01, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >
< div class =" horizContainer " >
  < img
    src =""
    alt =" Row 02, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 02, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >

JavaScript

 var lazyLoadInstances = [ ] ;

var initOneLazyLoad = function ( horizContainerElement ) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad ( {
    container : horizContainerElement
  } ) ;
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances . push ( oneLL ) ;
} ;

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
  elements_selector : ".horizContainer" ,
  callback_enter : initOneLazyLoad ,
  unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ;

É isso. Sempre que um elemento .horizContainer entra na janela de visualização, LazyLoad chama a função initOneLazyLoad , que cria uma nova instância de LazyLoad no elemento .horizContainer .

DEMO - FONTE - API

Ama este projeto? ? Compre-me um café!

Demonstrações

Não encontrou a receita que combina exatamente com o seu caso? Temos demonstrações!

A pasta demos contém mais de 30 casos de uso de vanilla-lazyload. Você pode encontrar lá o que procura.

Tipo	Título	Código	Demonstração
Contente	Imagens simples de carregamento lento, sem usar nenhum espaço reservado	Código	Ao vivo
Contente	Imagens preguiçosas que usam um SVG embutido como espaço reservado	Código	Ao vivo
Contente	Imagens preguiçosas que usam um arquivo SVG externo como espaço reservado	Código	Ao vivo
Contente	Imagens responsivas preguiçosas com `srcset`	Código	Ao vivo
Contente	Imagens responsivas lentas com a tag `<picture>` e o atributo `media` (direção de arte)	Código	Ao vivo
Contente	Imagens responsivas lentas com `srcset` e `sizes` (usando `data-sizes` )	Código	Ao vivo
Contente	Imagens responsivas lentas com `srcset` e `sizes` (usando `sizes` simples)	Código	Ao vivo
Contente	Vídeo lento com múltiplas tags `<source>` , diferentes opções de pré-carregamento, SEM reprodução automática	Código	Ao vivo
Contente	Vídeo lento com múltiplas tags `<source>` , diferentes opções de pré-carregamento, COM reprodução automática	Código	Ao vivo
Contente	Imagens de fundo de carregamento lento	Código	Ao vivo
Contente	Carregamento lento de várias imagens de fundo	Código	Ao vivo
Contente	Carregamento lento de imagens de fundo com `image-set()`	Código	Ao vivo
Contente	Carregamento lento de iframes	Código	Ao vivo
Contente	Carregamento lento de SVGs animados e arquivos PDF	Código	Ao vivo
Contente	Imagens WebP preguiçosas com a tag `<picture>` e o atributo `type` para WebP	Código	Ao vivo
Carregando	Carregamento assíncrono LazyLoad com `<script async>`	Código	Ao vivo
Carregando	Carregamento assíncrono de múltiplas instâncias do LazyLoad com `<script async>`	Código	Ao vivo
Erro	Teste o comportamento de carregamento de erros quando `restore_on_error` for `false`	Código	Ao vivo
Erro	Teste o comportamento de carregamento de erros quando `restore_on_error` for `true`	Código	Ao vivo
Técnica	As imagens desaparecem à medida que são carregadas	Código	Ao vivo
Técnica	Imagens de carregamento lento em controles deslizantes horizontais somente CSS (estilo Netflix)	Código	Ao vivo
Técnica	Crie instâncias do Swiper preguiçosamente e carregue imagens do Swiper preguiçosamente	Código	Ao vivo
Técnica	Execute funções preguiçosamente à medida que elementos específicos entram na janela de visualização	Código	Ao vivo
Técnica	Como gerenciar a impressão de uma página com imagens preguiçosas	Código	Ao vivo
Técnica	Uma camada pop-up contendo imagens preguiçosas em um contêiner de rolagem	Código	Ao vivo
Configurações	Vários contêineres de rolagem	Código	Ao vivo
Configurações	Contêiner de rolagem única	Código	Ao vivo
Métodos	Como `restore()` DOM ao seu estado original e/ou `destroy()` LazyLoad	Código	Ao vivo
Métodos	Adicionando conteúdo dinâmico e então `update()` LazyLoad	Código	Ao vivo
Métodos	Adicionando conteúdo dinâmico e então `update()` LazyLoad passando um NodeSet de elementos	Código	Ao vivo
Métodos	Carregue imagens pontuais usando o método `load()`	Código	Ao vivo
Métodos	Carregue todas as imagens de uma vez usando `loadAll()`	Código	Ao vivo
Teste	Teste para vários limites	Código	Ao vivo
Teste	Teste o comportamento com imagens ocultas	Código	Ao vivo
Teste	Desempenho de teste, carregamento lento de centenas de imagens	Código	Ao vivo
Nativo	Teste o carregamento lento nativo de imagens SEM nenhuma linha de javascript, nem mesmo este script	Código	Ao vivo
Nativo	Teste o carregamento lento nativo de imagens condicionalmente usando a opção `use_native` (consulte API)	Código	Ao vivo

Ama este projeto? ? Compre-me um café!

? Dicas e truques

Expandir

vanilla lazyload

?‍ Primeiros passos - HTML

Imagem preguiçosa:

Imagem preguiçosa com espaço reservado de baixa qualidade:

Imagem responsiva preguiçosa com srcset e sizes :

Imagem responsiva lenta com suporte de alto dpi usando a tag picture :

Imagem responsiva lenta com seleção automática de formato WebP , usando a tag picture :

Imagem de fundo preguiçosa

Imagem de fundo única:

Fundo único, com suporte para tela HiDPI:

Vários planos de fundo:

Vários planos de fundo, suporte para tela HiDPI:

Planos de fundo com image-set :

Vários fundos com image-set :

SVG animado preguiçoso

Vídeo preguiçoso

Iframe preguiçoso

?‍ Primeiros passos - Script

A maneira simples e fácil

Usando um script async

Usando um script async + obtendo a referência da instância

Instalação local

Usando npm

Usando caramanchão

Download manual

Uso local

Uso com React

Pacotes

? Receitas

Ocultar texto alternativo e imagem vazia

Tratamento de erros de imagem

Conteúdo dinâmico

Carregamento lento misto nativo e baseado em JS

Painéis de rolagem

Funções preguiçosas

Inicialização lenta de múltiplas instâncias do LazyLoad

Demonstrações

? Dicas e truques

Imagem responsiva preguiçosa com `srcset` e `sizes` :

Imagem responsiva lenta com suporte de alto dpi usando a tag `picture` :

Imagem responsiva lenta com seleção automática de formato WebP , usando a tag `picture` :

Planos de fundo com `image-set` :

Vários fundos com `image-set` :

Usando um script `async`

Usando um script `async` + obtendo a referência da instância