vue-lazyload プラグインを使用して vue に画像を遅延ロードする

この記事では主に、Vue で画像を遅延ロードするための vue-lazyload プラグインの詳細なガイドを紹介します。興味のある方は参考にしていただければ幸いです。

vue で画像の遅延読み込みを使用するための詳細なガイド、 みんなと共有します。詳細は以下の通りです:

注意事項

ネットワークリクエストが比較的遅い場合は、この画像に事前に低ピクセルのプレースホルダー画像を追加して、重なったり、大きな空白が表示されたりしないようにします。ユーザーエクスペリエンスを少し改善します。

Case

demo: 遅延読み込みケースデモ

インストールインストール方法

npm

$ npm i vue-lazyload -D

CDN

CDN : https:// unpkg.com/vue-lazyload /vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
 Vue.use(VueLazyload)
 ...
</script>

Usage

main.js エントリファイル

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1
})

new Vue({
 el: 'body',
 components: {
  App
 }
})

でエントリファイルを追加した後、コンポーネント内の任意の場所にある img の src を直接使用できます - > v-lazy

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

前のプロジェクトの img タグの :src 属性を v-lazy

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

パラメータ オプションの説明

key	description	デフォルト	オプション
preLoad	読み込み前の高さの割合	1.3	数値
エラー	画像の読み込みが失敗したとき	のsrc'	文字列
読み込み中	画像が正常にロードされたとき	のsrc'	String
attempt	Attempt count	3	Number
listenEvents		[「スクロール」 、'wheel'、'mousewheel'、'resize'、'animationend'、'transitionend'、'touchmove']	必要なリッスン イベント
アダプター	要素の属性を動的に変更する	{ }	要素アダプター
filter	画像リスナーまたはフィルター	{ }	画像リスナーフィルター
lazyComponent	lazyloadコンポーネント	false	Lazy Component
dispatchEvent	dom イベントをトリガーします	false	ブール
スロットル待機	スロットル待機	200	数値
オブザーバー	交差点オブザーバーを使用	false	ブール
observerOptions	IntersectionObserver オプション	{ rootMargin: '0px'、しきい値: 0.1 }	IntersectionObserver

聞きたいイベント

配列

リスナーの名前を渡すことで、vue-lazyloadを使用したいイベントを設定できます。

Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1,
 // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
 listenEvents: [ 'scroll' ]
})

これは、このプラグインの読み込みのリセットに問題がある場合に役立ちます

関連する推奨事項:

画像の遅延読み込み imgLazyLoading.js の詳細な説明

IntersectionObserver を使用して画像の遅延読み込みを実装する方法

写真の遅延読み込み

以上がvue-lazyload プラグインを使用して vue に画像を遅延ロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。