私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

Webサイトの遅延読み込みライブラリ

Webサイトの遅延読み込みライブラリ


November, 30 2021

今日は、画像や動画などの要素に遅延読み込みを使用して、ウェブサイトのパフォーマンスと速度を最適化する方法を学びます。


遅延読み込みとは何ですか?

通常、Webサイトにアクセスすると、Webサイト上のすべての要素が読み込まれ、ブラウザーからコンテンツが表示されます。 このようなページの読み込みは、Webサイトのページの読み込み速度に大きく影響します。
そのため、遅延読み込みは、動画や画像など、ページの読み込みに影響する要素のパフォーマンスを改善および最適化するために生まれました。リクエストされたコンテンツのみを事前読み込みし、ユーザーが本当に必要としないときに他のコンポーネントを読み込まないようにします。

遅延読み込みを使用する利点

遅延読み込みを使用する場合、主に2つの利点があります。

  • パフォーマンスの向上:Webサイトにロードする必要のある要素の数を減らすことができます。 そこから、ブラウザが処理および分析する時間が改善されます。 したがって、Webサイトのコンテンツはより早くユーザーに届きます。
  • コストの削減:使用するバイト数に基づいて課金される写真ホスティングがいくつかあります。 したがって、この手法は、ユーザーが決して使用しない要素をWebサイトにロードしないようにするのに役立ちます。

そして、あなたが想像しやすくするために、私は実際の例を取り上げます!

画像の遅延読み込み

See the Pen Lazy Load Images by Derek Morash (@derekmorash) on CodePen.

リンク

Lazy Loading For Image Like Medium

See the Pen Medium image lazy load effect by Lógico (@logico-ar) on CodePen.

リンク

遅延読み込みの例

See the Pen Lazy Load Example by Sanjeev Pandey (@yednap) on CodePen.

リンク

SVGで遅延ロードを作成する

See the Pen Lazy loading with inline SVG by Mikael Ainalem (@ainalem) on CodePen.

リンク

Create Lazy Load With Scroll Out Effect

See the Pen Lazy-Load images with ScrollOut by Christopher Wallis (@notoriousb1t) on CodePen.

リンク

純粋なJavascriptによる遅延読み込み

See the Pen Lazy loading images using event handlers - example code by ImageKit.io (@imagekit_io) on CodePen.

リンク

キャプション付きの遅延読み込み画像を作成する

See the Pen Lazy Loading Fig+Figcaption & Flipping Card by Alex Paul (@alex_paul) on CodePen.

リンク

Slickライブラリを使用した遅延読み込み

See the Pen Slick Slide by Jason Davis (@jasondavis) on CodePen.

リンク

リストアイテムの遅延読み込み

See the Pen Lazy loading list items by Kevin Ivan (@kvzivn) on CodePen.

リンク

CSSの背景画像の遅延読み込み

See the Pen Lazy Loading background images in CSS by ImageKit.io (@imagekit_io) on CodePen.

リンク

ギャラリーの遅延読み込み

See the Pen Grid Fade and Intersection Observer Lazyload by magnificode (@magnificode) on CodePen.

リンク

Vuejsを使用した画像の遅延読み込み

See the Pen ScrollTrigger Vue.js - lazy load images by Erik Terwan (@erikterwan) on CodePen.

リンク

Angularjsを使用した画像の遅延読み込み

See the Pen Lazy Loading Image With AngularJS from Ben Nadel by yaoyi (@yaoyi) on CodePen.

リンク

Reactjsを使用した画像の遅延読み込み

See the Pen React Preload Image by Stelios Constantinides (@stothelios) on CodePen.

リンク

Lazy Load Video Iframe

See the Pen Lazy loading video iframe with placeholder by Vincent Orback (@vincentorback) on CodePen.

リンク

「Masonry Layout」の遅延読み込みを作成する

See the Pen Masonry layout Pure #CSS Grid + lazy-load v.2 by @kseso by Kseso (@Kseso) on CodePen.

リンク

Jqueryを使用してレイジーロードを作成する

See the Pen jquery lazy loading images by andy (@NaSymbol) on CodePen.

リンク

遅延ロードのモーションエフェクト

See the Pen Animated image placeholder by Abhisek Dutta (@0xfa1l) on CodePen.

リンク

LOZAD.JS

 LOZAD.JS

リンク

Lazysizes

 Lazysizes

リンク

Layzr.js

 Layzr.js

リンク

Lazy Load Remastered

 Lazy Load Remastered

リンク

Responsively Lazy

 Responsively Lazy

リンク

Blazy

 Blazy

リンク

結論

この記事が、Webデザインと開発に役立つ遅延読み込みに関する知識を提供することを願っています。 ご不明な点がございましたら、お気軽にメールでお問い合わせください。 できるだけ早く返信いたします。