vue3 vue2 video picture lazy loading plug-in

A small npm plug-in, a lightweight plug-in of only about 8kb

You can set the placeholder image when loading pictures and videos, the placeholder image for image loading errors, and specify the loading area.

For vue3, please see the documentationv3-lazyload-hyw - npm (npmjs.com)

The documentation for vue2 is here v2-lazyload-hyw - npm (npmjs.com)

Installation tutorial: Just npm install v3-lazyload-hyw in the terminal 

usage:

First register the command globally:

main.js:

import createLazyLoad from v3-lazyload-hyw

//如果是vue2
import createLazyLoad from v2-lazyload-hyw

const lazyOptions = {

        loading : '图片加载时占位图',

        error:'图片加载错误占位图',

        payload:1.3

}

app.directive('v-lazyload',createLazyLoad(lazyOptions))

//如果是vue2

Vue.directive('v-lazyload',createLazyLoad(lazyOptions))

Then you can use:

<img v-layzload='你的图片路径' />