在webpack环境下的图片懒加载用法
第一步是下载依赖包 npm i vue-lazyload -S
第二步是在main.js入口文件导入
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)//这个是默认配置
//或者使用下面的配置
Vue.use(VueLazyload, {
preLoad: 1.3, //预载高度比例
error: 'dist/error.png',//加载后映像的src失败
loading: 'dist/loading.gif',//加载时图片的src
attempt: 1//尝试次数
})
第三步在模板中使用
<template>
<div>
<ul>
<li v-for="img in list">
<img v-lazy="img.src" class="lazy">
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
list:['./images/a.jpg','./images/b.jpg','./images/c.jpg']
}
}
</script>
第四步也可以在样式中是实现加载时和加载错误时的样式
<style scoped="scoped">
img[lazy=loading] {
//在这时可以设置加载时的样式或背景图片
}
img[lazy=error] {
}
img[lazy=loaded] {
}
.lazy[lazy=loading] {
}
.lazy[lazy=error] {
}
.lzay[lazy=loaded] {
}
</style>
在CND环境的用法
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<style >
img[lazy=loading]{
background-color: #F94A69;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
</div>
<script>
Vue.use(VueLazyload)
var vm=new Vue({
el:"#app",
data:{
list:['./images/a.jpg','./images/b.jpg','./images/c.jpg']
}
})
</script>
</body>
懒加载的作用
1 增强用户体验
2 优化代码
3减少http的请求
4减少服务器端压力
5服务器的按需加载
依赖包和文档在github的地址
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
