lozad.js
1.0.0
Altamente performante, leve e configurável carregador preguiçoso em js puro, sem dependências para imagens, iframes e muito mais, usando a intersectionObserver API
E muito mais ...
As bibliotecas de carregamento preguiçosas existentes conectam -se ao evento de rolagem ou use um cronômetro periódico e ligue para getBoundingClientRect() em elementos que precisam ser carregados preguiçosos. Essa abordagem, no entanto, é dolorosamente lenta, pois cada chamada para getBoundingClientRect() obriga o navegador a reaparecer a página inteira e apresentará considerável Jank no seu site.
Tornar isso mais eficiente e performente é para o que a intersectionObserver é projetada e é desembarcada no Chrome 51. IntersectionObservers avisa você quando um elemento observado insere ou sai da visualização do navegador.
# You can install lozad with npm
$ npm install --save lozad
# Alternatively you can use Yarn
$ yarn add lozad
# Another option is to use Bower
$ bower install lozadEntão, com um módulo como Rollup ou Webpack, use como você faria com qualquer outra coisa:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' ) Ou carregue via CDN e inclua na head da sua página.
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > Ao carregar da CDN, você pode encontrar a biblioteca no window.lozad .
No HTML, adicione um identificador ao elemento (seletor padrão identificado é a classe lozad ):
< img class =" lozad " data-src =" image.png " >Tudo o que você precisa fazer agora é apenas instanciar lozad da seguinte maneira:
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ; ou com uma referência Element DOM:
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;ou com opções personalizadas:
const observer = lozad ( '.lozad' , {
rootMargin : '10px 0px' , // syntax similar to that of CSS Margin
threshold : 0.1 , // ratio of element convergence
enableAutoReload : true // it will reload the new image when validating attributes changes
} ) ;
observer . observe ( ) ;Referência:
ou se você deseja dar uma definição de função personalizada para carregar o elemento:
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; Se você deseja estender o estado loaded de elementos, pode adicionar a opção carregada:
Nota : O atributo
"data-loaded"="true"é usado pelo Lozad para determinar se um elemento foi carregado anteriormente.
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;Se você deseja uma carga preguiçosa elementos adicionados dinamicamente:
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as wellPara uso com imagens responsivas
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >Para uso com imagens de fundo
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >Para uso com várias imagens de fundo
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >Para uso com imagens de fundo responsivas (conjunto de imagens)
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >Para alterar o delimitador que divide as imagens de fundo:
<!-- custom delimiter for background images example -->
< div
class =" lozad "
data-background-image =" /first/custom,image,path/image.png-/second/custom,image,path/image.png "
data-background-delimiter =" - "
>
</ div >Se você quiser carregar as imagens antes que elas apareçam:
const observer = lozad ( ) ;
observer . observe ( ) ;
const coolImage = document . querySelector ( '.image-to-load-first' ) ;
// ... trigger the load of a image before it appears on the viewport
observer . triggerLoad ( coolImage ) ;Às vezes, o carregamento da imagem leva muito tempo. Para este caso, você pode adicionar um plano de espaço reservado:
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >Lozad define uma cor de fundo do elemento IMG e os usuários verão o fallback até que a imagem seja carregada.
Crie uma estrutura de elemento de imagem quebrada .
Ou seja, o navegador não suporta tag de imagem! Você precisa definir o atributo
data-iesrc(apenas para suas tags de imagem) com fonte para o navegador do IE
O atributo
data-altpode ser adicionado à tag de imagem para uso no atributoaltde imagens carregadas preguiçosas
<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- NO img element -->
<!-- instead of img element, there will be the last source with the minimum dimensions -->
<!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</ picture >Quando Lozad carrega esse elemento de imagem, ele o consertará.
Se você deseja usar o espaço reservado para imagens (como espaço reservado para imagem de baixa qualidade), pode definir uma tag img temporária dentro da sua tag picture . Ele será removido quando o lozad carregar o elemento de imagem.
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
< img src =" data:image/jpeg;base64,/some_lqip_in_base_64== " >
</ picture > < video class =" lozad " data-poster =" images/backgrounds/video-poster.jpeg " >
< source data-src =" video/mov_bbb.mp4 " type =" video/mp4 " >
< source data-src =" video/mov_bbb.ogg " type =" video/ogg " >
</ video > < iframe data-src =" embed.html " class =" lozad " > </ iframe > Isso é tudo, basta adicionar a aula lozad .
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > A classe active será alternada no elemento quando entrar na visualização do navegador.
Disponível nos navegadores mais recentes. Se o suporte ao navegador não estiver disponível, use o Polyfill.
Para o suporte do IE11, use esses poli -preenchimentos.
Confira o wiki de perguntas frequentes para obter alguns pegadinhos comuns para usar ao usar Lozad.js
Interessado em contribuir com recursos e correções?
Leia mais sobre a contribuição.
Veja o Changelog
MIT © Apoorv Saxena
