Vue预加载和懒加载的使用方法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。
懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用,预加载 则会增加服务器前端压力。
预加载:
简单理解:就是在使用该图片资源前,先加载到本地来,真正到使用时,直接从本地请求数据就行了。
var arr = [
'../picture/1.jpg',
'../picture/2.jpg',
'../picture/3.jpg',
];
var imgs =[]
preLoadImg(arr);
//图片预加载方法
function preLoadImg(pars){
for(let i=0;i<arr.length;i++){
imgs[i] = new Image();
imgs[i].src = arr[i];
}
}
懒加载的使用方法:
这里使用vue-lazyload插件
1.下载依赖:
npm install vue-lazyload --save
2.引入:
import Vue from ‘vue’
import App from ‘@/App’
import VueLazyload from ‘vue-lazyload’
3.配置
Vue.use(VueLazyload, {
preLoad: 1.3,//预载高度比例
error: require('./assets/images/err.png'),//加载失败时图像的 src
loading: require('./assets/images/loading.gif'),//加载时图像的 src
attempt: 1,// 尝试次数
listenEvents: ['scroll']// 你想让 vue 监听的事件
});
4.组件使用
<template>
<div class="lazyLoad">
<ul id="container">
<li v-for="img in arr">
<img v-lazy="img.thumbnail_pic_s">
</li>
</ul>
</div>
</template>
<script>
export default({
name:"lazyLoad",
data(){
return{
arr:[]
}
},
mounted:function(){
//请求本地数据
this.$http.get('/api/data').then(res=>{
this.arr=res.data.data;
console.log(this.data)
})
},
})
</script>
<style scoped>
li{
list-style: none
}
</style>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)