Lazyload 图片懒加载

基本用法

  1. <template>
  2.   <div class="lazyloadDemo">
  3.     <h4>基础使用</h4>
  4.     <img v-lazy="imageArray[0]" />
  5.     <h4>背景图懒加载</h4>
  6.     <div v-lazy:background-image="imageArray[1]"></div>
  7.     <h4>懒加载模块</h4>
  8.     <lazy-component>
  9.       <img :src="imageArray[2]" />
  10.     </lazy-component>
  11.     <h4>错误、加载中 图片设置</h4>
  12.     <div v-lazy:background-image="imgObj"></div>
  13.   </div>
  14. </template>
  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       imgObj: {
  6.         src: "//error.png",
  7.         error: '//img12.360buyimg.com/imagetools/jfs/t1/75933/12/14706/2086/5dc142e4E62f88e83/2d68d4d25d87faa4.png',
  8.         loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png'
  9.       },
  10.       imageArray: [
  11.         "//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg",
  12.         "//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png",
  13.         "//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg"
  14.       ]
  15.     };
  16.   }
  17. };
  18. </script>
  19. <style scoped>
  20.   img[lazy="loading"] {
  21.     /*your style here*/
  22.   }
  23.   img[lazy="error"] {
  24.     /*your style here*/
  25.   }
  26.   img[lazy="loaded"] {
  27.     /*your style here*/
  28.   }
  29. </style>

Prop

字段说明类型默认值
loading加载时的图片String-
error错误时的图片String-
preload提前加载高度（数字 1 表示 1 屏的高度）Number1.3
attempt加载错误后最大尝试次数Number3
listenEvents监听事件string[][‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘animationend’, ‘transitionend’, ‘touchmove’]
adapter动态修改元素属性Object{ }
filter图片监听过滤Object{ }
lazyComponent组件懒加载Booleanfalse
dispatchEvent触发元素状态监听事件（error, loaded, rendered）Booleanfalse

更多内容请参照：vue-lazyload 官方文档

Lazyload 图片懒加载 - 图1