Vue lazyload 画像遅延読み込み例の詳細な説明

ドキュメント: https://github.com/hilongjw/vue-lazyload

1. インストール

cnpm と vue-lazyload -S
または npm i vue-lazyload -S

2. 例

インポート設定とその他の操作 src/main.js

'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
//【1】遅延読み込みをインポートする import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) //【1】遅延読み込みを使用する（次の文から1つ選択）
 
//【1】遅延読み込みを使用し、グローバル設定を入力するため、使用箇所でエラー画像などを設定する必要はありません（2つから1つを選択）
// Vue.use(VueLazyload, {
// preLoad: 1.3, // 読み込み時間 // error: 'dist/error.png', // 画像エラーが発生した場合にこの画像を表示する // loading: 'dist/loading.gif', // 読み込み中にこの画像を表示する // attempt: 1 // 読み込まれる画像のデフォルト数 // })
 
Vue.config.productionTip = false
 
/* eslint を無効にする no-new */
新しいVue({
    el: '#app',
    ルーター、
    テンプレート: '<App/>',
    コンポーネント:
        アプリ
    }
})

遅延読み込み src/components/lazy.vue を使用する

【1】画像エラー表示等の定義（jsの場合は画像のインポートは必須）
【2】遅延読み込み方式v-lazy='xxx'を使用する

<テンプレート>
    <div>
        <!--【2】遅延読み込み方式v-lazy='xxx'を使用する-->
        <img v-lazy="imgUrl"/>
        <img v-lazy="imgObj" />
    </div>
</テンプレート>
<スクリプト>
     
エクスポートデフォルト{
    名前:"怠け者",
    データ（）{
        戻る {
        // [1] 画像エラー表示等を定義する（jsの場合は画像のインポートが必須）
        画像オブジェクト: {
            preLoad: 1.3, //読み込み時間 src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg", //実際の画像エラー: require("../assets/error.jpg"), //エラーが発生した場合は、この画像を表示します。読み込み中: require("../assets/loadingding.jpg"), //読み込み試行中にこの画像を表示します: 1, //読み込む画像のデフォルト数},
        imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" // 実際の画像を 1 行だけ追加します}
    }
}  
</スクリプト>
 
<スタイル></スタイル>

影響: 画像アドレスが間違っている場合に画像が読み込まれます。読み込み処理中は、読み込み処理画像が表示されます。

Vue-lazyload イメージ遅延読み込みに関するこの記事はこれで終わりです。Vue-lazyload イメージ遅延読み込みに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: