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