【文件属性】:
文件名称:vue-lazy-container:检测页面中元素的可见性
文件大小:293KB
文件格式:ZIP
更新时间:2021-04-21 09:22:22
vue container lazyload JavaScript
Vue懒惰的容器
English |
介绍
vue惰性容器,通过检测页面中元素的可见性,决定是否加载资源并进行渲染。
为什么
当页面内容超过一个屏幕时,我们通常只希望加载和呈现当前屏幕的数据。随着页面的滚动,加载并呈现以下内容。 这可以大大提高页面打开速度,并减少额外的网络请求(xhr)。vue-lazy-container可以帮助我们解决此问题。
在线演示
更多细节请参考这个。
安装
npm install vue-lazy-container
或者
yarn add vue-lazy-container
用法
在mian.js中编写以下内容:
import VueLazyContainer from "vue-lazy-container" ;
Vue . use ( VueLazyContainer ) ;
例子:
< template>
< vue-lazy-cont
【文件预览】:
vue-lazy-container-main
----package.json(2KB)
----.github()
--------FUNDING.yml(687B)
----src()
--------index.js(185B)
--------index.jsx(2KB)
----.eslintrc.js(2KB)
----examples()
--------vue.config.js(41B)
--------package.json(1KB)
--------src()
--------.eslintrc.js(1KB)
--------.gitignore(231B)
--------.browserslistrc(30B)
--------public()
--------README.md(312B)
--------yarn.lock(406KB)
--------.editorconfig(121B)
--------babel.config.js(300B)
----.gitignore(303B)
----README-CN.md(2KB)
----.browserslistrc(30B)
----README.md(2KB)
----.eslintignore(28B)
----.editorconfig(121B)
----build()
--------webpack.main.config.js(2KB)
--------config.js(213B)
--------common()
--------webpack.umd.config.js(2KB)
----babel.config.js(237B)