lozad.js
1.0.0
IntersectionSectionObserver APIを使用して、画像、IFRAMEなどを依存せずに、純粋なJSの高性能、軽量で構成可能なレイジーローダー
そしてもっと...
既存の怠zyなロードライブラリは、スクロールイベントに接続するか、定期的なタイマーを使用して、怠zyなロードを必要とする要素にgetBoundingClientRect()を呼び出します。ただし、このアプローチは、 getBoundingClientRect()を強制するたびに、ブラウザにページ全体を再レイアウトするように強制し、WebサイトにかなりのJankを紹介するため、痛々しいほど遅くなります。
これをより効率的かつパフォーマンスすることが、交差点担当者の設計が設計されており、Chrome 51に着陸します。EntersectionObserversでは、観察された要素がブラウザのビューポートに入ったり出たりしたときを知らせます。
# 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 lozad次に、ロールアップやウェブパックなどのモジュールバンドラーを使用して、他のものと同じように使用してください。
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' )または、 CDNを介してロードし、ページのheadに含めます。
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > CDNからロードするときは、 window.lozadでライブラリを見つけることができます。
HTMLでは、要素に識別子を追加します（識別されたデフォルトセレクターはlozadクラスです）：
< img class =" lozad " data-src =" image.png " >あなたが今する必要があるのは、次のようにlozadをインスタンス化することだけです：
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ;またはDOM Element参照：
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;またはカスタムオプションがあります：
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 ( ) ;参照：
または、要素を読み込むためのカスタム関数定義を指定する場合：
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; loaded要素の状態を拡張したい場合は、ロードされたオプションを追加できます。
注：
"data-loaded"="true"属性は、要素が以前にロードされたかどうかを判断するためにLozadによって使用されます。
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;動的に追加された要素を怠loadにしたい場合：
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as wellレスポンシブ画像で使用するため
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >背景画像で使用するため
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >複数の背景画像で使用します
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >応答性のある背景画像で使用するため（画像セット）
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >背景画像を分割する区切り文字を変更するには：
<!-- 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 >画像が表示される前にロードしたい場合：
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 ) ;画像の読み込みには長い時間がかかることがあります。この場合、プレースホルダーの背景を追加できます。
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >LozadはIMG要素のプレースホルダーの背景色を設定し、ユーザーは画像がロードされるまでフォールバックを見るでしょう。
壊れた画像要素構造を作成します。
IEブラウザは画像タグをサポートしていません！ IEブラウザのソースを使用して、
data-iesrc属性（写真タグのみ）を設定する必要があります
data-alt属性は、Lazy-Loaded画像のalt属性で使用するために画像タグに追加できます
<!-- 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 >Lozadがこの画像要素をロードすると、修正されます。
画像プレースホルダー（低品質の画像プレースホルダーなど）を使用する場合は、 pictureタグ内に一時的なimgタグを設定できます。 Lozadが画像要素をロードすると削除されます。
< 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 >それだけです、 lozadクラスを追加するだけです。
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > activeクラスは、ブラウザのビューポートに入ると、要素に切り替えられます。
最新のブラウザで利用できます。ブラウザのサポートが利用できない場合は、PolyFillを使用してください。
IE11サポートについては、これらのポリフィルを使用してください。
lozad.jsの使用中に一般的なゴッチャスが認識されるために、よくあるwikiをチェックアウトしてください
機能と修正の貢献に興味がありますか？
貢献の詳細を読んでください。
Changelogを参照してください
MIT©Apoorv Saxena
