Vue-clazy-loadを使用して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はほとんどすべての遅延読み込みの状況を処理できると思います。 楽しみ!