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延迟加载图像。
用法 (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
$ 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
vue加载js延迟