zoukankan      html  css  js  c++  java
  • vue项目添加个全局的图片懒加载(vue-lazyload)

    npm:

    npm i vue-lazyload -S

    main.js:

    import VueLazyload from 'vue-lazyload'
    
    
    Vue.use(VueLazyload,{
        preLoad:0.5,
        //loading:require('./assets/loading.gif'),
        loading:'',
        attempt:2,
        listenEvents:['scroll'],
        filter: {
            index(listener, opts) {
                if (location.href.indexOf('index')>-1) {
                    opts.ListenEvents = ['touchmove']        
                }
             }
        },
        observer: true,
        observerOptions:{ 
            rootMargin: '0px', 
            threshold: 0.1 ,
        }
    })

    正常使用:

    <img v-lazy="imgUrl" />

    可是当你想自定义每个图片的loading效果的时候就不行了,翻看了几遍官网才发现有可以解决的方法

    <script>
    export default {
      data () {
        return {
          imgObj: {
            src: 'http://xx.com/logo.png',
            error: 'http://xx.com/error.png',
            loading: 'http://xx.com/loading-spin.svg'
          },
          imgUrl: 'http://xx.com/logo.png' // String
        }
      }
    }
    </script> 
     
    <template>
      <div ref="container">
         <img v-lazy="imgUrl"/>
         <div v-lazy:background-image="imgUrl"></div>
     
         <!-- with customer error and loading -->
         <img v-lazy="imgObj"/>
         <div v-lazy:background-image="imgObj"></div>
     
         <!-- Customer scrollable element -->
         <img v-lazy.container ="imgUrl"/>
         <div v-lazy:background-image.container="img"></div>
     
        <!-- srcset -->
        <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
        <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
      </div>
    </template>

    重点是下面这句,他可以直接识别你对象里面的src、error、loading:

    <img v-lazy="imgObj"/>
    <div v-lazy:background-image="imgObj"></div>
  • 相关阅读:
    js命名空间
    window安装node.js
    JS添加可信站点、修改ActiveX安全设置,禁用弹出窗口阻止程序的方法
    Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
    DIV+CSS两种盒子模型
    table中的tbody标签
    兼容获取元素的样式属性值
    Arch linux 使用心得
    763. 划分字母区间
    <Leetcode>93. 复原地址
  • 原文地址:https://www.cnblogs.com/chao202426/p/11389587.html
Copyright © 2011-2022 走看看