vueプロジェクトで画像の怠惰なロードを実現する方法

画像が多すぎるページでは、ページのロード速度を速めるために、ページ内に表示されていない画像をロードせずに、表示領域にスクロールしてからロードする必要がある場合が多い.これにより、ページのロード性能が大幅に向上し、ユーザー体験も向上します.
実装方法(vueのvue-lazyloadプラグインを使用)
1.プラグインのインストール

npm install vue-lazyload --save-dev

2.エントリファイルmain.jsに導入して使用

import VueLazyload from 'vue-lazyload'

直接使用

Vue.use(VueLazyload)

またはカスタムオプションを追加

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

3.画像の表示方式を怠惰なロードに変更する(src属性を直接v-lazyに変更する)

<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage">a>

パラメータオプションの説明
画像の怠惰なロードの簡単な効果はすでに実現して、それからこの開発ドキュメントのapiによって拡張することができます:
key
description
default
optionspreLoadproportion of pre-loading height(プリロード高さスケール)1.3Numbererrorsrc of the image upon load fail(ピクチャパスエラー時にピクチャをロード)'data-src'Stringloadingsrc of the image while loading(プリロードピクチャ)'data-src'Stringattemptattempts count(ピクチャ数をロードしようとする)3NumberlistenEventsevents that you want vue listen for(傍受したいvueイベント)デフォルト['scroll']は省略できますが、プラグインがページ内のアニメーションや遷移などのイベントと競合している場合は、他のオプションを試してみてください.['scroll'（ ）, 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
Desired Listen Events adapterdynamically modify the attribute of element(要素プロパティを動的に変更){ }Element Adapter filterthe image's listener filter(ピクチャアドレスパスを動的に変更){ }Image listener filter lazyComponentlazyload component falseLazy Component dispatchEventtrigger the dom event falseBooleanthrottleWaitthrottle wait 200Numberobserveruse IntersectionObserver falseBooleanobserverOptionsIntersectionObserver options
{ rootMargin: '0px', threshold: 0.1 }
IntersectionObserver
 
これで、簡単な画像の怠け者のロードが完了しました......
転載先:https://www.cnblogs.com/xieli26/p/10057763.html