图片懒加载

vue-lazyload

github地址：github.com/hilongjw/vu… 简单实现：blog.csdn.net/qq_35828720…

// 1，安装插件：vue-lazyload，注意版本号
npm i vue-lazyload -D

// 2，注册插件：main.js文件引入并注册
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)

// 2，注册插件：main.js文件引入并注册
import VueLazyLoad from 'vue-lazyload'

const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1
})

// 3，页面/组件中使用，使用v-lazy指令
<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

// 3，页面/组件中使用，v-lazy-container配合data-arc
<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>

echo.js

官方地址：github.com/toddmotto/e… echo示例：github.com/helijun/doc…

不使用三方库，自定义全局指令方式

参考文章：www.jb51.net/article/112…

// 最终使用方式
<img v-lazyload="imageSrc">

// 新建lazyload.js文件，内容如下：
export default (Vue , options = {})=>{
    // 初始化的选项，default是未加载图片时显示的默认图片
    var init = {
        default: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'
    }
    
    // addListener为Vue指令的具体实现功能函数，我们这里为所有使用v-lazyload的指令的元素添加监听
    // ele是dom元素，binding是绑定的具体值，
    // 例如：<img v-lazyload="imageSrc" > ele是img binding是imageSrc
    const addListenner = (ele,binding) =>{
　　　　
    }
    
    // Vue自定义指令，lazyload为指令的名称
    Vue.directive('lazyload',{
        inserted:addListener,
        updated:addListener
    })
}