图片懒加载

最新推荐文章于 2024-08-27 22:36:25 发布

MiemieWan

最新推荐文章于 2024-08-27 22:36:25 发布

阅读量163

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/MiemieWan/article/details/102688430

版权

js基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

图片懒加载：图片位置滑动到可视区再显示

function lazyImg() {
    // 获取所有图片
	const imgs = document.getElementsByTagName('img');
    // 获取可视区高度
	const viewHeight = window.innerHeight || document.documentElement.clientHeight;
    //设置num用于统计当前显示到第几张,避免每次都从第一张开始检查是否显示
	let num = 0;
    // 懒加载方法 :如果可视区高度大于元素顶部高度，说明元素进入可视区
	return function() {
		for(var i = num; i < imgs.length; i ++) {
			let distance = viewHeight - imgs[i].getBoundingClientRect().top;
			if(distance >= 0) {
				imgs[i].src = imgs[i].getAttribute('data-src');
				num = i + 1;
			}
		}
	}

}
// window.addEventListener('scroll',lazyImg(), false);
window.onscroll = lazyImg();