vue-oe-lazy

1.0.3 • Public • Published

vue-lazyload-img

intro

a plugin of vue for image lazyload, especially optimized for mobile browser

demo

  • support require.js(AMD),sea.js(CMD),webpack(CommonJs)
  • detect image's visibility not only from vertical direction, but also horizontal
  • detect scrolling speed, when scrolling speed is faster than threshold, image will not be loaded

API

init

Vue.use(Vue.lazyLoad[,options])

options

global options

fadein: all images will use fadein fx

  • true: all images will fadein if lazyload Complete
  • false (default): no fadein fx of all

nohori: disable lazyload from horizontal direction

  • true: all images will not detect horizontal direction
  • false (default): detect horizontal direction

speed: threshold of loading lazyload iamge

  • 0 (default): load lazy-image when the image is visible at the 1st time
  • 0 (recommend 20): average changes of document y-pos and any scroller's x-pos from last 10 frames, awesome in mobile browsers

Vue.use(Vue.lazyLoad,{
    fadein: true,
    nohori: true,
    speed: 20,
})

directive

v-lazy

  • v-lazy="src"
  • v-lazy:opt.nohri="src"
  • v-lazy:opt.fadein="src"
  • v-lazy:opt.nohri.fadein="src"

介绍

vue图片懒加载插件,特别为移动端优化
  • 十字方向检测图片是否可显示,不仅能做到上下滚动懒加载,还能做到水平方向懒加载
  • 监测屏幕滚动速率,阈值可自定义,尤其适合移动端,比如屏幕快速向下滑动,其间的图片不会被加载
  • 可选的淡入特效

API

初始化

Vue.use(Vue.lazyload[,options])

options(可选参数)

全局选项

fadein: 全部图片使用淡入特效

  • true: 所有的图片都会使用淡入特效
  • false (默认): 不使用淡入特效

nohori: 禁用水平方向的检测

  • true: 禁用水平方向的检测
  • false (默认): 不禁用水平方向的检测

speed: 速度检测的临界值

  • 0 (默认): 只要图片在屏幕里出现了,那么图片就开始懒加载
  • 0 (推荐 20): 只有当屏幕滚动速度小于speed且图片在屏幕中出现了才开始懒加载

Vue.use(Vue.lazyload,{
    fadein: true,
    nohori: true,
    speed: 20,
})

directive

v-lazy

  • v-lazy="src"
  • v-lazy:opt.nohri="src"
  • v-lazy:opt.fadein="src"
  • v-lazy:opt.nohri.fadein="src"

Readme

Keywords

none

Package Sidebar

Install

npm i vue-oe-lazy

Weekly Downloads

4

Version

1.0.3

License

MIT

Last publish

Collaborators

  • maat