PsLazy

图片/组件懒加载
支持Vue/jq传统原生项目

Vue

install

$ npm i ps-lazy -S

cdn

pslazy.vue.js

main.js

import Vue from 'vue'
import App from './App.vue'
import PsLazy from 'ps-lazy'

Vue.use(PsLazy)

// or with options
const loadimage = require('./assets/loading.gif')
Vue.use(PsLazy, {
  // 加载图
    defaultImg: 'img.src',
    // 预加载比例
    preLoad: 1.3,
    // 加载完成回调
    complete: function(opt) {
        console.log(opt.el, opt.src)
    },
})

template

<!-- 组件懒加载 -->
<ps-lazy-component tag="p">
    <img src="./public/a7.jpg">
</ps-lazy-component>


<!-- v-pslazy指令 -->

<!-- img元素 -->
<img v-pslazy="img.src" >

<!-- 背景图元素 -->

<!-- tag不附加任何属性，可用css覆盖样式, 属性有lazy="loading | loaded" -->
<div v-pslazy></div>

<!-- 用背景图 -->
<div v-pslazy="'./public/a16.jpg'"></div>

check

<button ps-lazy-check>check all ps-lazy element</button>

this.$PsLazy.checkAll()
this.$PsLazy.check(el)

jquery or 原生项目

cdn

pslazy.native.js

template

<!-- img元素 -->
<img ps-lazy="img.src" >
<!-- 背景图元素 -->
<!-- 不自动添加属性 可用css覆盖样式, 属性有lazy="loading | loaded"-->
<div ps-lazy></div>
<div ps-lazy="./public/a16.jpg"></div>

format

<!-- 全局检测 -->
<button ps-lazy-check>check all ps-lazy element</button>

var Lazy = new PsLazy({
  // 加载图
    defaultImg: 'img.src',
    // 预加载比例
    preLoad: 1.3,
    // 加载完成回调
    complete: function(opt) {
        console.log(opt.el, opt.src)
    },
})
Lazy.format()
Lazy.check(el)

options

option = {
    // 加载图
    defaultImg: 'img.src',
    // 预加载比例
    preLoad: 1.3,
    // inviiew完成回调
    complete: function(opt) {
        console.log(opt.el, opt.src, opt.state)
    },
    // 监听事件集合
    events: ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'],
    // 监听事件第三个参数
    capture: false
}

第一个分享图

<!-- 分享图 -->
<img data-share="./public/a15.jpg" style="display: none;">