Lazyload レイジーロード - Vant 4
⚡ Lazyload レイジーロード
🎯 紹介
Lazyload コンポーネントは、賢明な「リソース管理官」🏠 のようなものです！どのコンテンツを即座にロードする必要があり、どれが後ででもいいかをインテリジェントに判断することができます。ページに大量の画像やコンポーネントを表示する必要がある場合、ユーザーがそれらを見ようとしているときにだけ「出現」させる魔法使いのように機能し、ページの読み込み速度を高速化し、ユーザーエクスペリエンスをスムーズにします！
📦 導入
以下の方法でコンポーネントをグローバルに登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
Lazyload は Vue ディレクティブであり、使用前にディレクティブを登録する必要があります。まるで Vue に「スマートセンサー」を取り付けるようなものです！
import { createApp } from'vue'; import { Lazyload } from'vant'; const app = createApp(); app.use(Lazyload); // 登録時に追加のオプションを設定できます app.use(Lazyload, { lazyComponent: true, });🚀 コードサンプル
🔧 基本的な使い方
v-lazy ディレクティブの値を、レイジーロードする必要がある画像に設定します。まるで画像に「必要に応じて表示」のタグを貼るようなものです！📸
exportdefault { setup() { return { imageList: [ 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg', ], }; }, };🖼️ 背景画像のレイジーロード
画像のレイジーロードとは異なり、背景画像のレイジーロードには v-lazy:background-image を使用する必要があり、その値を背景画像の URL に設定します。まるでコンテナに「スマートカメレオン」の服を着せるようなものですが、コンテナの高さを必ず指定して、ステージを提供する必要があります！
🧩 コンポーネントのレイジーロード
レイジーロードしたいコンポーネントを lazy-component タグ内に配置すると、コンポーネントのレイジーロードを実現できます。まるでコンポーネントを「タイムカプセル」に入れるようなもので、必要な時にのみ「蘇る」のです！
// 登録時に`lazyComponent`オプションを設定 app.use(Lazyload, { lazyComponent: true, });API
オプション
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| loading | ロード中の画像 | string | - |
| error | エラー時の画像 | string | - |
| preLoad | プリロードの高さの比率 | number | - |
| attempt | 試行回数 | number | 3 |
| listenEvents | 監視するイベント | string[] | scroll等 |
| adapter | アダプター | object | - |
| filter | 画像 URL フィルター | object | - |
| lazyComponent | モジュールをレイジーロードできるかどうか | boolean | false |
詳細については以下を参照してください：vue-lazyload 公式ドキュメント
よくある質問
CDN 経由で Vant を導入した場合、Lazyload コンポーネントが自動的に登録されないのはなぜですか？
Lazyload コンポーネントは登録時にいくつかの設定オプションを渡すことができるため、自動的に登録することは行っておらず、手動で登録する必要があります：
const app = Vue.createApp(); app.use(vant.Lazyload, { lazyComponent: true, });📚 関連ドキュメント
🖼️ メディアコンポーネント
- Image 画像 - 画像コンポーネント。レイジーロードの最適なパートナー
- ImagePreview 画像プレビュー - 画像プレビューコンポーネント。レイジーロードの最適化をサポート
🚀 パフォーマンス最適化
- List リスト - リストコンポーネント。長いリストのパフォーマンス最適化のための強力なツール
- Loading ローディング - ローディングコンポーネント。待ち時間の体験を向上
🎨 デザインコンポーネント
- Skeleton スケルトンスクリーン - スケルトンスクリーンコンポーネント。ローディング状態の優雅な表示
- Empty 空の状態 - 空の状態コンポーネント。データがない場合の友好的なヒント
🛠️ 開発ガイド
- Advanced Usage 高度な使い方 - 高度な使い方ガイド。コンポーネント登録の詳細
🔧 ツールコンポーネント
- PullRefresh プルリフレッシュ - プルリフレッシュコンポーネント。データ更新の体験