vue图片懒加载实现及其原理
这里写自定义目录标题vue实现懒加载htmljsvue实现懒加载html<template><div ref='wrap'><div v-for="(item, index) in datalistMy" :key="index">{{ index+1 }}</div></div></template>...
·
vue实现懒加载
懒加载好用的地方在于进入页面时不会全部渲染元素,这样大大的提高了渲染速度，实现原理很好理解；主要原理就是先展示低像素的占位图，在图片进入可视范围后替换加载过来的图片实现懒加载的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片懒加载实例</title>
<style>
#app>div {
border: 1px solid #333;
height: 200px;
}
img {
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(item, index) in 20" :key="index">
<img :data-src="reqUrl" :src="url" alt="">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
// 图片百度上随便找的，方便测试
url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F115eaf6bede4617a0be70f980fef9575fa22a0a360a9-KytOkD_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660470829&t=ca2418c87a8b0c26be4c8b0378ff8616',
reqUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb90434ff9eec1c98406bacb375974c590ba90827.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660472343&t=43e5069a1c4c49b11c738738d8551f84'
}
},
mounted() {
this.getScroll()
window.addEventListener('scroll', this.getScroll) //实时监听滚动条的变化
},
destroyed() { //注意：监听的函数要在关闭页面时销毁掉,不然会影响到其它页面
window.removeEventListener('scroll', this.getScroll)
},
methods: {
getScroll() {
// 获取页面所有img标签
const imgs = document.getElementsByTagName('img')
// 获取可视范围的高度
const vh = document.documentElement.clientHeight
// 获取滚动条的高度
var top = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset
for (const i in imgs) {
// 如果图片进入可视范围就替换加载过来的图片
if (imgs[i].offsetTop < (vh + top)) {
if (imgs[i].src !== imgs[i].dataset.src) imgs[i].src = imgs[i].dataset.src
}
}
},
},
})
</script>
</html>
- ctrl c + ctrl v 就能用
- 不懂看注释
- 如果对你有用点个赞谢谢！
前往低代码交流专区
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)