图片懒加载

• vue-lazyload
• vue-lazy-component
• 资料

vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.

vue-lazyload其实是一个注册的一个全局指令，主要用于图片懒加载功能。

cdn地址  https://unpkg.com/vue-lazyload/vue-lazyload.js

在入口文件main.js中直接引入，然后使用use方法直接调用,它的配置项可以看Github 文档,在这里我是指定了一张默认图片。

import VueMeta from 'vue-meta'

Vue.use(VueLazyLoad, {
  loading: require('./common/image/default.png')
})

文档中还提供了Demo实际效果。

vue-lazy-component

vue-lazy-component是迅雷 FE 团队开发的一个图片懒加载组件，引用这个插件具体解决做 Seketon 骨架屏效果。可配置的参数实用，效果不错。

• @support 组件可见或即将可见时懒加载

• @support 组件延时加载

• @support 加载真实组件前展示骨架组件，提高用户体验

• @support 真实组件代码分包异步加载

  它也提供了 cdn 地址和Demo:

cdn地址  https://unpkg.com/@xunlei/vue-lazy-component@1.0.7/dist/vue-lazy-component.js

资料

• vue-lazyload
• vue-lazy-component 文档