vue-lazyload圖片消極式載入外掛程式的執行個體講解，

vue-lazyload圖片消極式載入外掛程式的執行個體講解，

1、首先在npm上下載vue-lazyload的引用包

npm install vue-lazyload --save-dev

2、然後我們在main.js裡面import這個包，當然，單單這一個包是不夠的，還得其他的檔案

import Vue from 'vue';import App from './App.vue'import router from './router';import VueLazyload from "vue-lazyload"

3、然後我們配置vue-lazyload

Vue.use(VueLazyload, {error: 'static/error.png',//這個是請求失敗後顯示的圖片loading: 'static/loading.gif',//這個是載入的loading過渡效果try: 2 // 這個是載入圖片數量})

4、具體配置api可以看

html

<template> <div>  <ul id="container">   <li v-for="img in list">    <img v-lazy="img">   </li>  </ul> </div></template>

JS

<script> export default { data () {  return {    list: [    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',   ]  } } }</script>

css

<style>//圖片載入中...img[lazy=loading] { /*width: 100px;*/ background-position:center center!important; background: url("../../../static/images/loading.gif"); background-size:100px 100px; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}img[lazy=error] { /*width: 100px;*/ background-position:center center!important; background: url("../../../static/images/error.png"); background-size:100px 100px; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}img[lazy=loaded] { /*width: 100px;*/ background-position:center center!important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: green;}/* or background-image */ .yourclass[lazy=loading] { /*your style here*/ } .yourclass[lazy=error] { /*your style here*/ } .yourclass[lazy=loaded] { /*your style here*/ }</style>

以上這篇vue-lazyload圖片消極式載入外掛程式的執行個體講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。