vanilla lazyloadダウンロード - vanilla lazyloadソースコードのダウンロード

LazyLoad は軽量 (2.4 kB) で柔軟なスクリプトで、スクロールせずに見える範囲の画像、アニメーション SVG、ビデオ、および iframe の読み込みをビューポートに入るまで延期することでWeb アプリケーションを高速化します。これはプレーンな「バニラ」JavaScript で書かれており、IntersectionObserver API を利用し、応答性の高い画像をサポートし、接続が遅い場合に Web サイトを最適化し、ネイティブの遅延読み込みを有効にすることができます。詳細については、すべての機能をご覧ください。

➡️ ジャンプ先: ?‍ はじめに - HTML - ?‍ はじめに - スクリプト - ?レシピ - デモ - ?ヒントとコツ - ? API - ?すべての機能を比較

このプロジェクトが気に入っていますか? ?コーヒー買ってきてよ！

?‍ はじめに - HTML

コンテンツを LazyLoad でロードするには、実際の属性の代わりにいくつかのdata-属性を使用する必要があります。以下に例を示します。

怠惰なイメージ:

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

低品質のプレースホルダーを含む遅延画像:

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

`srcset`と`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 "
/>

低品質のプレースホルダーを使用するには、画像の非常に小さいバージョンを指すsrc属性を追加します。たとえば、 src="lazy_10.jpg" 。

`picture`タグを使用した Hi-dpi サポート付きの遅延レスポンシブ画像:

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

低品質のプレースホルダーを使用するには、画像の非常に小さいバージョンを指すsrc属性をimgタグに追加します。たとえば、 src="lazy_10.jpg" 。

`picture`タグを使用した、 WebP形式の自動選択を備えた遅延レスポンシブ画像:

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

低品質のプレースホルダーを使用するには、画像の非常に小さいバージョンを指すsrc属性をimgタグに追加します。たとえば、 src="lazy_10.jpg" 。

怠惰な背景画像

重要な注意: ページにコンテンツ画像を表示するには、常にimgタグを使用してください。これは、SEO と Web サイトのアクセシビリティに利益をもたらします。画像がコンテンツなのか背景なのかを理解するには、「Web サイトのユーザーはページを印刷するときにそれらの画像を見たいだろうか?」と自問してください。答えが「はい」の場合、画像はコンテンツ画像であるため、それらを表示するために背景画像を使用することは避けるべきです。

単一の背景画像:

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

単一背景、HiDPI 画面サポート:

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

複数の背景:

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

複数の背景、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 >

`image-set`を使用した背景:

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

`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

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

怠惰なビデオ

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

ビデオポスターも遅延ロードされる可能性があることに注意してください。

遅延 iframe

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

このプロジェクトが気に入っていますか? ?コーヒー買ってきてよ！

?‍ はじめに - スクリプト

LazyLoad の最新の推奨バージョンは19.1.3です。 Internet Explorer 11 をサポートする必要がある場合は、バージョン 17.9.0 以下を使用する必要があることに注意してください。

実践的なアップグレードガイドを読んで、以前のバージョンからアップグレードする方法をすぐに理解できます。

シンプルで簡単な方法

LazyLoad を使用する最も簡単な方法は、CDN からスクリプトを含めることです。

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

または、ES モジュールとしてインポートしたい場合は、次のようにします。

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

次に、JavaScript コード内で次のようにします。

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

LazyLoad をインスタンス化するときに遅延コンテンツの DOM が確実に準備できるようにするには、 </body>終了タグの直前に script タグを配置します。

後で、たとえば AJAX 呼び出し経由でさらに DOM が到着する場合は、 lazyLoadInstance.update(); LazyLoad で DOM を再度チェックするようにします。

 lazyLoadInstance . update ( ) ;

`async`スクリプトの使用

必要に応じて、 asyncスクリプトを使用して LazyLoad のスクリプトを組み込み、ロードされるとすぐに初期化することができます。

そのためには、スクリプトを含める前にオプションを定義する必要があります。次のものを渡すことができます。

{} LazyLoad の単一インスタンスを取得するオブジェクト
[{}, {}]それぞれに異なるオプションを持つ LazyLoad の複数のインスタンスを取得するためのオブジェクトの配列。

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

次に、スクリプトをインクルードします。

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

場合によっては、 </body>終了タグの直前に script タグを配置します。それができない場合は、ブラウザーがすべての DOM をロードする前に LazyLoad が実行される可能性があるため、そのupdate()メソッドを呼び出して DOM を再度チェックする必要があります。

`async`スクリプトの使用 + インスタンス参照の取得

上記と同じですが、 asyncスクリプトを含める前に、以下に示すaddEventListenerコードを配置する必要があります。

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

次に、スクリプトをインクルードします。

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

これで、次のようなメソッドを呼び出すことができるようになります。

 lazyLoadInstance . update ( ) ;

DEMO - SOURCE ← 単一 LazyLoad インスタンス用

デモ - ソース ← 複数の LazyLoad インスタンス用

ローカルインストール

LazyLoad をプロジェクトにローカルにインストールしたい場合は、それも可能です。

npmの使用

 npm install vanilla-lazyload

バウアーの使用

 bower install vanilla-lazyload

マニュアルダウンロード

最新リリースの 1 つをダウンロードします。必要なファイルはdistフォルダー内にあります。どれを選択すればよいかわからない場合は、 lazyload.min.jsを使用するか、バンドルについて読んでください。

ローカルでの使用

LazyLoad をローカルにインストールする場合は、次のように ES モジュールとしてインポートできます。

 import LazyLoad from "vanilla-lazyload" ;

require commonJS 構文を使用することもできます (ただし、推奨されません)。

LazyLoad と WebPack のバンドルに関する詳細については、この特定のリポジトリで入手できます。

Reactでの使用法

Sandbox 上の LazyLoad を使用した React の使用例を見てください。

この実装は、通常imgタグに渡すのと同じ props を受け取りますが、遅延画像をレンダリングします。自由にフォークして改善してください。

バンドル

distフォルダー内には、さまざまなバンドルがあります。

ファイル名	モジュールの種類	利点
`lazyload.min.js`	UMD (ユニバーサルモジュール定義)	common-js コンテキストでも、ほぼどこでも機能します
`lazyload.iife.min.js`	IIFE (即時に呼び出される関数式)	ページ内`<script src="...">`として機能します。UMD バージョンよりも約 0.5kb 小さくなります。
`esm/lazyload.js`	ESモジュール	`LazyLoad`エクスポートして、 `<script type="module" src="...">`と WebPack や Rollup などのバンドラーの両方を使用してプロジェクトにインポートできるようにします

このプロジェクトが気に入っていますか? ?コーヒー買ってきてよ！

?レシピ

このセクションには、すぐにコピー＆ペーストできるコードが記載されています。

代替テキストと空の画像を非表示にする

ユースケース: 遅延ロードされた画像に、ロード前にaltテキストと空の画像アイコンが表示される場合。

CSS

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

本当にそれだけです。

画像エラーの処理

使用例: Web サイト上に存在しない画像や壊れた画像を表示したくない場合。

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]" ) ;
  }
} ) ;

注: ネットワークのダウン (一時的にオフラインの場合はナビゲーター) によってエラーが生成された場合、vanilla-lazyload はネットワークが再び利用可能になったときにイメージのロードを再試行します。

例 - API

動的コンテンツ

ユースケース: 画像を遅延読み込みしたいが、非同期で追加されるためか、スクロール領域内の画像の数が変化する場合。

JavaScript

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

デモ - ソース - API

ネイティブと JS ベースの遅延読み込みの混合

ユースケース: use_nativeオプションを使用して、画像、iframe、ビデオの読み込みをサポートされているブラウザエンジンに委任したいと考えていますが、背景画像も遅延読み込みしたいと考えています。

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
} ) ;

デモ - ソース - API

スクロールパネル

使用例: スクロールコンテナがメインブラウザウィンドウではなく、スクロールコンテナである場合。

HTML

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

JavaScript

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

デモ - ソース - API

複数のスクロールパネルがある場合は、次のマークアップとコードを使用できます。

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" )
} ) ;

デモ - ソース - API

遅延関数

ユースケース: 指定された要素がビューポートに入ったときに任意のスクリプトまたは関数を実行したい場合

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
} ) ;

関数が複数回実行されることを避けるには、 unobserve_entered使用します。

それでおしまい。 data-lazy-function属性を持つ要素がビューポートに入るたびに、LazyLoad は、 executeLazyScript関数を呼び出します。この関数はdata-lazy-function属性自体から関数名を取得して実行します。

デモ - ソース - API

複数の LazyLoad インスタンスの遅延初期化

使用例: 水平スクロールするコンテナが多数あり、それらのコンテナ上で LazyLoad インスタンスをインスタンス化したい場合ですが、コンテナがビューポートに入ったときのみに限られます。

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
} ) ;

それでおしまい。 .horizContainer要素がビューポートに入るたびに、LazyLoad はinitOneLazyLoad関数を呼び出し、 .horizContainer要素に LazyLoad の新しいインスタンスを作成します。

デモ - ソース - API

このプロジェクトが気に入っていますか? ?コーヒー買ってきてよ！

デモ

あなたのケースにぴったり合うレシピが見つかりませんでしたか?デモもございます！

デモフォルダーには、vanilla-lazyload の 30 以上の使用例が含まれています。探しているものが見つかるかもしれません。

タイプ	タイトル	コード	デモ
コンテンツ	プレースホルダーを使用しない、単純な遅延ロード画像	コード	ライブ
コンテンツ	インライン SVG をプレースホルダーとして使用する遅延画像	コード	ライブ
コンテンツ	外部 SVG ファイルをプレースホルダーとして使用する遅延画像	コード	ライブ
コンテンツ	`srcset`を使用した遅延レスポンシブ画像	コード	ライブ
コンテンツ	`<picture>`タグと`media`属性 (アートディレクション) を使用した遅延レスポンシブ画像	コード	ライブ
コンテンツ	`srcset`と`sizes`を使用した遅延応答イメージ ( `data-sizes`を使用)	コード	ライブ
コンテンツ	`srcset`と`sizes`を使用した遅延レスポンシブ画像 (プレーン`sizes`を使用)	コード	ライブ
コンテンツ	複数の`<source>`タグ、さまざまなプリロードオプション、自動再生なしの遅延ビデオ	コード	ライブ
コンテンツ	複数の`<source>`タグ、さまざまなプリロードオプション、自動再生付きの遅延ビデオ	コード	ライブ
コンテンツ	背景画像の遅延読み込み	コード	ライブ
コンテンツ	複数の背景画像の遅延読み込み	コード	ライブ
コンテンツ	`image-set()`を使用した背景画像の遅延読み込み	コード	ライブ
コンテンツ	iframe の遅延読み込み	コード	ライブ
コンテンツ	アニメーション SVG および PDF ファイルの遅延読み込み	コード	ライブ
コンテンツ	`<picture>`タグと WebP の`type`属性を含む Lazy WebP 画像	コード	ライブ
読み込み中	`<script async>`を使用した LazyLoad の非同期読み込み	コード	ライブ
読み込み中	`<script async>`を使用した複数の LazyLoad インスタンスの非同期ロード	コード	ライブ
エラー	`restore_on_error`が`false`場合のエラー読み込み動作をテストする	コード	ライブ
エラー	`restore_on_error`が`true`の場合のエラー読み込み動作をテストする	コード	ライブ
技術	画像の読み込み時にフェードインする	コード	ライブ
技術	CSS のみの水平スライダーで画像を遅延読み込み (Netflix スタイル)	コード	ライブ
技術	Swiper インスタンスを遅延作成し、Swiper イメージを遅延ロードする	コード	ライブ
技術	特定の要素がビューポートに入ると関数を遅延実行します。	コード	ライブ
技術	遅延画像を含むページの印刷を管理する方法	コード	ライブ
技術	スクロールコンテナ内の遅延画像を含むポップアップレイヤー	コード	ライブ
設定	複数のスクロールコンテナ	コード	ライブ
設定	単一スクロールコンテナ	コード	ライブ
メソッド	DOM を元の状態に`restore()`方法、および/または LazyLoad を`destroy()`方法	コード	ライブ
メソッド	動的コンテンツを追加してから`update()` LazyLoad	コード	ライブ
メソッド	動的コンテンツを追加し、要素の NodeSet を渡す`update()` LazyLoad	コード	ライブ
メソッド	`load()`メソッドを使用して時間通りに画像をロードする	コード	ライブ
メソッド	`loadAll()`使用してすべての画像を一度にロードします	コード	ライブ
テスト	複数のしきい値をテストする	コード	ライブ
テスト	隠し画像を使用して動作をテストする	コード	ライブ
テスト	テストのパフォーマンス、数百枚の画像の遅延読み込み	コード	ライブ
ネイティブ	このスクリプトを含め、JavaScript 行を一切使用せずに、画像のネイティブ遅延読み込みをテストします。	コード	ライブ
ネイティブ	`use_native`オプションを使用して、画像のネイティブ遅延読み込みを条件付きでテストします (API を参照)	コード	ライブ

このプロジェクトが気に入っていますか? ?コーヒー買ってきてよ！

?ヒントとコツ

拡大する

vanilla lazyload

?‍ はじめに - HTML

怠惰なイメージ:

低品質のプレースホルダーを含む遅延画像:

srcsetとsizes指定した遅延応答イメージ:

pictureタグを使用した Hi-dpi サポート付きの遅延レスポンシブ画像:

pictureタグを使用した、 WebP形式の自動選択を備えた遅延レスポンシブ画像:

怠惰な背景画像

単一の背景画像:

単一背景、HiDPI 画面サポート:

複数の背景:

複数の背景、HiDPI 画面のサポート:

image-setを使用した背景:

image-setを使用した複数の背景:

遅延アニメーション SVG

怠惰なビデオ

遅延 iframe

?‍ はじめに - スクリプト

シンプルで簡単な方法

asyncスクリプトの使用

asyncスクリプトの使用 + インスタンス参照の取得

ローカルインストール

npmの使用

バウアーの使用

マニュアルダウンロード

ローカルでの使用

Reactでの使用法

バンドル

?レシピ

代替テキストと空の画像を非表示にする

画像エラーの処理

動的コンテンツ

ネイティブと JS ベースの遅延読み込みの混合

スクロールパネル

遅延関数

複数の LazyLoad インスタンスの遅延初期化

デモ

?ヒントとコツ

`srcset`と`sizes`指定した遅延応答イメージ:

`picture`タグを使用した Hi-dpi サポート付きの遅延レスポンシブ画像:

`picture`タグを使用した、 WebP形式の自動選択を備えた遅延レスポンシブ画像:

`image-set`を使用した背景:

`image-set`を使用した複数の背景:

`async`スクリプトの使用

`async`スクリプトの使用 + インスタンス参照の取得