这么复杂啊，加个对选项卡的监听试试看，设置选项卡的class为“.nav-tab”。
<script>
// 获取页面可视区域的高度
const visibleHeight = window.innerHeight;
// 获取页面上所有图片的元素
const imgs = document.querySelectorAll("img");
// 为每个图片元素添加 data-src 属性
for (const img of imgs) {
img.setAttribute("data-src", img.src);
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
}
// 设置阈值和延迟
const threshold = 100;
// 节流函数
let throttleTimeout;
function throttleScroll() {
if (throttleTimeout) {
return;
}
throttleTimeout = setTimeout(() => {
throttleTimeout = null;
lazyLoad();
}, 200);
}
// 监听滚动事件
window.addEventListener("scroll", throttleScroll);
// 监听导航选项卡的点击事件
const navTabs = document.querySelectorAll(".nav-tab");
for (const navTab of navTabs) {
navTab.addEventListener("click", () => {
lazyLoad();
});
}
// 交错加载的图片数量
const batchSize = 10;
// 懒加载函数
function lazyLoad() {
// 遍历所有图片元素
for (let i = 0; i < imgs.length; i += batchSize) {
// 获取当前批次的图片元素
const batch = imgs.slice(i, i + batchSize);
// 遍历当前批次的图片元素
for (const img of batch) {
// 获取图片元素的顶部和底部位置
const rect = img.getBoundingClientRect();
const top = rect.top;
const bottom = rect.bottom;
// 如果图片元素的顶部或底部位置距离可视区域顶部距离小于阈值
if ((top <= visibleHeight && bottom >= 0) || (bottom >= 0 && top <= visibleHeight + threshold)) {
img.src = img.getAttribute("data-src");
}
}
}
}
// 初始加载一次
lazyLoad();
</script>
|
顶部 
加入收藏夹
2024-01-04 07:33:51 
已设置保密
回复
引用
报告
编辑
删除
