vue-clazy-loadを使用してVue.jsで画像を遅延ロードする

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

画像はWeb開発の楽しい部分です。それらは見栄えがよく、ほとんどすべてのアプリやサイトで非常に重要ですが、巨大で低速です。最近の一般的な手法は、画像がビューポートに入るときに画像を遅延読み込みする手法です。これにより、アプリの読み込みにかかる時間が大幅に節約され、表示する必要のある画像のみが読み込まれます。 Vue.jsには遅延読み込みソリューションがいくつかありますが、現時点での私の個人的なお気に入りはvue-clazy-loadです。

これは基本的に、カスタム画像とカスタムプレースホルダーを表示できるスロットを備えた非常にシンプルなラッパーです。他に多くはありませんが、それは信じられないほど柔軟です。

インストール

vue-clazy-loadをVue.jsプロジェクトにインストールします。

# Yarn
$ yarn add vue-clazy-load

# NPM
$ npm install vue-clazy-load --save

main.js（部分的）

import Vue from 'vue';
import App from 'App.vue';
import VueClazyLoad from 'vue-clazy-load';

...

Vue.use(VueClazyLoad);

...

new Vue({
  el: '#app',
  render: h => h(App)
});

vue-clazy-loadは最新のIntersectionObserver APIを使用しているため、ほとんどのブラウザーでポリフィルをサポートする必要があります。これはうまく機能しますが、 IntersectionObserverAPIを提供するポリフィルはすべて機能するはずです。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

使用法

今、あなたは使用することができます以下に示すように、コンポーネントを直接コンポーネントします。

App.vue

<template>
  <div id="app">
    <!-- The src allows the clazy-load component to know when to display the image. -->
    <clazy-load src="https://baconmockup.com/400/400/">
      <!-- The image slot renders after the image loads. -->
      <img src="https://baconmockup.com/400/400/">
      <!-- The placeholder slot displays while the image is loading. -->
      <div slot="placeholder">
        <!-- You can put any component you want in here. -->
        Loading....
      </div>
    </clazy-load>
  </div>
</template>

これにより、要素がビューポートに入るとロードを開始し、画像がロードされるまでLoading…を表示してから画像を表示する基本的なdivが取得されます。素晴らしくてシンプル！

もちろん、渡すことができるいくつかの小道具があります：

src：文字列（必須）-ロードする画像のsrc。
tag：String-どのコンポーネント/要素clazy-loadがレンダリングされるか。（デフォルトは退屈な’ol divです。）
element：String-ビューポートと見なす要素。それ以外の場合は、ブラウザのビューポートが使用されます。（カスタムスクロール領域がある場合に便利です。）
しきい値：配列 || 番号 -表示領域までの距離クレイジーロードコンポーネントは、ロードを開始する前にある必要があります。詳細については、MDNを参照してください。
margin：String-交差点オブザーバーに適用されるマージンの値。
ratio：Number -ロードが発生する前にビューポートにある必要がある要素のパーセンテージに対応する0〜1の値。
crossorigin：「anonymous」または「use-credentials」-別のドメインでホストされているイメージのCORSでの作業を支援するオプション。
loadClass：文字列、 LoadingClass：文字列＆ errorClass：文字列 -さまざまな状態のルート要素に付けるクラス名。

loadイベントという1つのイベントも提供されます。これは、名前が示すように、画像の読み込みが完了したときに出力されます。

また、以下に示すように、Vueトランジションコンポーネントを含む、スロット内の任意のコンポーネントを効果的に使用できることにも注意してください。

<template>
  <div id="app">
    <!-- Boom: Free fade transitions. -->
    <clazy-load src="https://baconmockup.com/400/400/">
      <transition name="fade">
        <img src="https://baconmockup.com/400/400/">
      </transition>
      <transition name="fade" slot="placeholder">
        <div slot="placeholder">
          Loading....
        </div>
      </transition>
    </clazy-load>
  </div>
</template>

<style>

.fade-enter, .fade-leave-to {
  opacity: 0;
}

</style>

画像のプリロードを処理するためのこれほど簡単な方法は考えられません。よろしければ、お気軽にメッセージを送ってください！ただし、今のところ、vue-clazy-loadはほとんどすべての遅延読み込みの状況を処理できると思います。楽しみ！

getdocs

13036