在一些图片比较多的网站会用到 图片懒加载 技术,这项技术可以延迟加载图像,只当图片出现在我们看到的视图中才加载,它的好处是 大大提高用户体验,节省不必要的资源浪费以及网站的性能提升等 。
首先 实现思路:
img标签中的src属性给一个默认图片 比如---加载中的图片,什么都可以...,再在img标签自定义一个属性 例如:datasrc为循环的真实图片路径,这个自定义属性待会要和src替换,在页面滚动时,如果当前视图大小中有这张图片则进行src替换,直接上代码
在页面加载完成后给html加上滚动事件(scroll),判断图片位置
<div class="all">
<!-- 固定头 -->
<div class="header">菜单</div>
<!-- 这是图片+内容部分 -->
<div class="main">
<div v-for="i in data.list" class="div" @click="torouter(i.goods_id)">
<!-- 左边图片 -->
<div class="left">
<img src="load.jpg" :datasrc="i.goods_small_logo" />
</div>
<!-- 右边描述文字 -->
<div class="right">{{i.goods_name}}</div>
</div>
</div>
</div>
let router = useRouter();
//获取根节点
let html = document.documentElement;
const data = reactive({
list: [],
});
onMounted(() => {
//初始化数据
init();
//滚动时判断图片位置
window.addEventListener("scroll", lazyload);
});
let init = () => {
//这个接口是从网上找的,随便用
axios
.get(
"https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query=TCL&pagenum=1&pagesize=50"
)
.then((res) => {
//获取初始化数据
data.list = res.data.message.goods;
//页面打开时显示当前的图片
//这里是为了在获取数据后防止dom未渲染,判断图片找不到dom,所以在dom更新后执行图片
nextTick(() => {
lazyload();
});
});
};
let torouter = (id) => {
router.push("/about?id=" + id); //详情跳转
};
let lazyload = () => {
// 获取所有的图片
let imgs = document.querySelectorAll("img");
for (let i = 0; i < imgs.length; i++) {
//当前图片距离顶部高度 <= 当前视图 进行src替换
if (imgs[i].offsetTop <= html.clientHeight + html.scrollTop) {
setTimeout(() => {
imgs[i].src = imgs[i].getAttribute("datasrc");
}, 300);
}
}
};
return {
data,
torouter,
};
},
效果:
最核心的地方在于每个默认图片的偏移位置和当前视图位置的对比, html.clientHeight + html.scrollTop也就是当前视图高度+当前距离顶部的高度,就是现在滚动视图的地方,如果遍历的图片存在于当前视图,就进行加载.
图片懒加载核心函数
let lazyload = () => {
// 获取所有的图片
let imgs = document.querySelectorAll("img");
for (let i = 0; i < imgs.length; i++) {
//当前图片距离顶部高度 <= 当前视图 进行src替换
if (imgs[i].offsetTop <= html.clientHeight + html.scrollTop) {
setTimeout(() => {
imgs[i].src = imgs[i].getAttribute("datasrc");
}, 300);
}
}
};
在挂载阶段通过window的scroll事件 , 滚动就触发上述函数,就可实现图片的懒加载
这里的定时器写了300毫秒是为了更直观的看到图片的显示过程,可以自己尝试更改