ytd-vue-lazyload

v1.0.1

Published

2 years ago

Vue module for lazy-loading images in your vue.js applications.

Downloads

0High
0Medium
0Low

yuandidi

vue-lazyload vue lazyload vue-directive

用于存放公共静态资源的项目，项目发布到npm上，以便多个项目引用 npm官网地址： https://www.npmjs.com/

一、本地开发测试npm包

1、拉取npm项目，在根目录下执行 npm link 2、到使用npm包的项目根目录下执行。 npm link xxx xxx为npm包package.json里name字段的名称，即npm包名称。 3、在npm包项目修改之后 run build，使用项目中刷新即可生效。 4、测试调试完毕，可以修改版本号然后 npm publish 上传新修改的包内容，同步到远程。 5、删除软链接：在使用npm包项目根目录执行 npm unlink 对应包名称，重新安装npm包：npm install 对应包名称。

二、注意项 1、npm 包使用的其他依赖包版本尽量和需要使用到这个npm包的项目依赖包版本保持一致。

Vue-Lazyload

Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:

Be lightweight, powerful and easy to use
Work on any image type
Add loading class while image is loading
Supports both of Vue 1.0 and Vue 2.0

Demo

Demo

Requirements

Vue.js 1.x or 2.x

Installation

npm


$ npm i vue-lazyload -S

yarn


$ yarn add vue-lazyload

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
  Vue.use(VueLazyload)
  ...
</script>

Usage

main.js:


import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

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

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

new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

use v-lazy-container work with raw HTML

<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>

custom error and loading placeholder image

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

Constructor Options

|key|description|default|options| |:---|---|---|---| | preLoad|proportion of pre-loading height|1.3|Number| |error|src of the image upon load fail|'data-src'|String |loading|src of the image while loading|'data-src'|String| |attempt|attempts count|3|Number| |listenEvents|events that you want vue listen for|['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']| Desired Listen Events | |adapter| dynamically modify the attribute of element |{ }| Element Adapter | |filter| the image's listener filter |{ }| Image listener filter | |lazyComponent| lazyload component | false | Lazy Component | dispatchEvent|trigger the dom event|false|Boolean| | throttleWait|throttle wait|200|Number| | observer|use IntersectionObserver|false|Boolean| | observerOptions|IntersectionObserver options|{ rootMargin: '0px', threshold: 0.1 }|IntersectionObserver| | silent|do not print debug info|true|Boolean|

Desired Listen Events

You can configure which events you want vue-lazyload by passing in an array of listener names.

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1,
  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  listenEvents: [ 'scroll' ]
})

This is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place

Image listener filter

dynamically modify the src of image

Vue.use(vueLazy, {
    filter: {
      progressive (listener, options) {
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) {
              listener.el.setAttribute('lazy-progressive', 'true')
              listener.loading = listener.src + '?imageView2/1/w/10/h/10'
          }
      },
      webp (listener, options) {
          if (!options.supportWebp) return
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) {
              listener.src += '?imageView2/2/format/webp'
          }
      }
    }
})

Element Adapter

Vue.use(vueLazy, {
    adapter: {
        loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
            // do something here
            // example for call LoadedHandler
            LoadedHandler(el)
        },
        loading (listender, Init) {
            console.log('loading')
        },
        error (listender, Init) {
            console.log('error')
        }
    }
})

IntersectionObserver

use Intersection Observer to to improve performance of a large number of nodes.

Vue.use(vueLazy, {
  // set observer to true
  observer: true,

  // optional
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
})

Lazy Component

Vue.use(VueLazyload, {
  lazyComponent: true
});

<lazy-component @show="handler">
  <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

<script>
  {
    ...
    methods: {
      handler (component) {
        console.log('this component is showing')
      }
    }

  }
</script>

Use in list

<lazy-component v-for="(item, index) in list" :key="item.src" >
  <img class="mini-cover" :src="item.src" width="100%" height="400">
</lazy-component>

Implementation

Basic

vue-lazyload will set this img element's src with imgUrl string

<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>

CSS state

There are three states while img loading

loading loaded error

<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">

<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  }
  .yourclass[lazy=loaded] {
    /*your style here*/
  }
</style>

Methods

Event Hook

vm.$Lazyload.$on(event, callback) vm.$Lazyload.$off(event, callback) vm.$Lazyload.$once(event, callback)

$on Listen for a custom events loading, loaded, error
$once Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
$off Remove event listener(s).

`vm.$Lazyload.$on`

Arguments:

{string} event
{Function} callback

Example

vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
  console.log(el, src)
})

`vm.$Lazyload.$once`

Arguments:

{string} event
{Function} callback

Example

vm.$Lazyload.$once('loaded', function ({ el, src }) {
  console.log(el, src)
})

`vm.$Lazyload.$off`

If only the event is provided, remove all listeners for that event

Arguments:

{string} event
{Function} callback

Example

function handler ({ el, src }, formCache) {
  console.log(el, src)
}
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)
vm.$Lazyload.$off('loaded')

LazyLoadHandler

vm.$Lazyload.lazyLoadHandler

Manually trigger lazy loading position calculation

Example


this.$Lazyload.lazyLoadHandler()

Performance

this.$Lazyload.$on('loaded', function (listener) {
  console.table(this.$Lazyload.performance())
})

performance-demo

Dynamic switching pictures

 <img v-lazy="lazyImg" :key="lazyImg.src">

Authors && Contributors

License

The MIT License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Vue-Lazyload

Table of Contents

Demo

Requirements

Installation

npm

yarn

CDN

Usage

Constructor Options

Desired Listen Events

Image listener filter

Element Adapter

IntersectionObserver

Lazy Component

Implementation

Basic

CSS state

Methods

Event Hook

vm.$Lazyload.$on

Arguments:

Example

vm.$Lazyload.$once

Arguments:

Example

vm.$Lazyload.$off

Arguments:

Example

LazyLoadHandler

Example

Performance

Dynamic switching pictures

Authors && Contributors

License

`vm.$Lazyload.$on`

`vm.$Lazyload.$once`

`vm.$Lazyload.$off`