图片懒加载就是前端进行的一个性能优化处理
1.首先准备一个div用来循环img的
2.给img的src设置一个loading.gif的图片,再给一个data-src设置成图片路径
(这里我在写的时候发现,如果给src设置的值为空字符串,他每次就会直接把值赋值给src,就没有性能优化的效果了)
<div class="aaa">
<!-- 存放照片的div -->
<div class="layout" ref="allImgRef">
<!-- 循环生成的img -->
<div v-for="(item, index) in data" :key="index" ref="imgRef" class="a">
<img :src="item.src" :data-src="item.value" />
</div>
</div>
</div>
3.data数据
如果我这里的src为 ‘’, 就会出现在页面渲染时,直接把所有照片都请求完这种情况
data () {
return {
data: [
{
src: require('../../assets/1.gif'),
value: require('../../assets/1.jpg')
},
{
src: require('../../assets/1.gif'),
value: require('../../assets/2.jpg')
},
{
src: require('../../assets/1.gif'),
value: require('../../assets/3.jpg')
},
{
src: require('../../assets/1.gif'),
value: require('../../assets/4.jpg')
},
{
src: require('../../assets/1.gif'),
value: require('../../assets/5.jpg')
},
{
src: require('../../assets/1.gif'),
value: require('../../assets/6.png')
},
{
src: require('../../assets/1.gif'),
value: require('../../assets/7.jpg')
}
]
}
4.最重要的流程
methods: {
scroll () {
// 至于这里为什么套了两层setTimeout,因为我再拿取这些高度的时候,页面还未完全渲染完毕.
setTimeout(() => {
// 获取数据的长度,后面循环需要用到
const length = this.data.length
// 获取存放img的div盒子的clientHeight
const clientHeight = this.$refs.allImgRef.clientHeight
// 获取存放img的div盒子的scrollTop
const scrollTop = this.$refs.allImgRef.scrollTop
// 循环判断
for (let i = 0; i < length; i++) {
setTimeout(() => {
// 拿到照片距离父级顶部的距离,offsetTop(固定不变的值)
const imgOffsetTop = this.$refs.imgRef[i].offsetTop
if (imgOffsetTop < clientHeight + scrollTop) {
this.data[i].src = this.data[i].value
}
}, 10)
}
}, 10)
}
},
mounted () {
// 初次进入页面没有滚动,需要自行调用一次
this.scroll()
// 添加scroll滚动事件
window.addEventListener('scroll', this.scroll, true)
}
5.css样式
<style lang="less" scoped>
.aaa {
height: 100vh;
overflow: hidden;
}
.layout {
height: 100vh;
width: 50vw;
overflow-y: scroll;
background-color: lightblue;
img {
width: 100%;
}
}
</style>
描述一下整个流程:
首先我们需要拿到存放img的整个div标签的clientHeight高度,和滚动条滚动的高度scrollTop,还需要拿到每个img距离父级div最顶部的距离也就是offsetTop,这个值在页面初始化时,就开始是固定不变的,所以就可以通过这个距离进行判断,是否出现在可见区域,(如果对这几个高度不理解的,可以看我先前发的一篇,关于这些高度的解说~)
最后附上一个效果图(注意观看右边的网络请求)