vue知识点： 图片懒加载

npm install vue-lazyload --save

用法：main.js

import Vue from 'vue'

import App from './App.vue'

import VueLazyload from 'vue-lazyload'

 

Vue.use(VueLazyload)

 

// or with options

Vue.use(VueLazyload, {

  preLoad: 1.3,

  error: 'dist/error.png',

  loading: 'dist/loading.gif',

  attempt: 1

})

 

new Vue({

  el: 'body',

  components: {

    App

  }

})

 

template:

<ul>

  <li v-for="img in list">

    <img v-lazy="img.src" >

  </li>

</ul>

 

use v-lazy-container work with raw HTML

<div v-lazy-container="{ selector: 'img' }">

  <img data-src="//domain.com/img1.jpg">

  <img data-src="//domain.com/img2.jpg">

  <img data-src="//domain.com/img3.jpg">  

</div>

custom error and loading placeholder image

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">

  <img data-src="//domain.com/img1.jpg">

  <img data-src="//domain.com/img2.jpg">

  <img data-src="//domain.com/img3.jpg">  

</div>

<div v-lazy-container="{ selector: 'img' }">

  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">

  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">

  <img data-src="//domain.com/img3.jpg">  

</div>

Constructor Options

key	description	default	options
preLoad	proportion of pre-loading height	1.3	Number
error	src of the image upon load fail	'data-src'	String
loading	src of the image while loading	'data-src'	String
attempt	attempts count	3	Number
listenEvents	events that you want vue listen for	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	dynamically modify the attribute of element	{ }	Element Adapter
filter	the image's listener filter	{ }	Image listener filter
lazyComponent	lazyload component	false	Lazy Component
dispatchEvent	trigger the dom event	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver
silent	do not print debug info	true

 

详细：https://www.npmjs.com/package/vue-lazyload