vue加载js延迟_小型Vue.js指令，用于使用IntersectionObserver API延迟加载图像

vue加载js延迟

vue-tiny-lazyload-img (vue-tiny-lazyload-img)

A small size Vue.js directive for lazy loading images using IntersectionObserver API.

小型Vue.js指令，用于使用IntersectionObserver API延迟加载图像。

View Demo 查看演示 View Github 查看Github

用法 (Usage)

下载 (Download)

npm install vue-tiny-lazyload-img
// OR
yarn add intersection-observer

安装插件 (Install Plugin)

import VueTinyLazyloadImg from 'vue-tiny-lazyload-img'
Vue.use(VueTinyLazyloadImg);

HTML片段 (HTML Snippet)

<img v-lazyload
  src="./assets/logo.png"
  data-src="./assets/logo-success.png"
  data-err="./assets/logo-error.png">

请使用polyfill (Please Use polyfill)

This plugin using IntersectionObserver, so please use polyfill if you need support old browser

该插件使用IntersectionObserver ，因此如果需要支持旧版浏览器，请使用polyfill

• Using polyfill by @philipwalton

  使用@philipwalton的polyfill

$ yarn add intersection-observer

// then add polyfill for IntersectionObserver in your main app
require('intersection-observer')

• The easiest way to load the IntersectionObserver polyfill and have it work in the widest range of browsers is via polyfill.io, which will automatically include dependencies where necessary:

  加载IntersectionObserver polyfill并使它在最广泛的浏览器中运行的最简单方法是通过polyfill.io ，它会在必要时自动包含依赖项：

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

构建设置 (Build Setup)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production demo with minification
npm run build:demo

# build for plugin distribution file
npm run build:lib

翻译自: https://vuejsexamples.com/a-small-size-vue-js-directive-for-lazy-loading-images-using-intersectionobserver-api/

vue加载js延迟