图片懒加载

最新推荐文章于 2025-06-09 22:33:46 发布

a_passing_traveller

最新推荐文章于 2025-06-09 22:33:46 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：图片懒加载

本文链接：https://blog.youkuaiyun.com/a_passing_traveller/article/details/94743560

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种网页中图片懒加载的实现方法，通过判断页面滚动距离与图片位置的关系，动态加载图片，有效提升网页加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码思路

页面滚动时加载图片
判断页面窗口+页面滚动距离是否大于图片距顶部的距离，大于则加载。
通过创建实例预加载图片，加载完成后赋到图片上。

<div>
	<img src="images/loading.gif" data-src="images/1.jpg">
</div>
<div>
	<img src="images/loading.gif" data-src="images/2.jpg">
</div>
<div>
	<img src="images/loading.gif" data-src="images/3.jpg">
</div>

window.onload = function () {
	var imgs = document.querySelectorAll('img');
	lazyload(imgs)
	window.onscroll = function () {
		lazyload(imgs)
	}

	function lazyload(imgs) {
		var h = window.innerHeight;
		var t = document.documentElement.scrollTop || document.body.scrollTop;
		for (var i = 0; i < imgs.length; i++) {
			if ((h + t) > getTop(imgs[i])) {
				(function (i) {
					//预加载
					var tmp = new Image();
					tmp.src = imgs[i].getAttribute("data-src");
					tmp.onload = function () {
						imgs[i].src = imgs[i].getAttribute("data-src")
					}
				})(i)

			}
		}
	}

	//获取图片到顶部的位置
	function getTop(img) {
		var t = img.offsetTop;
		// 当img为body时结束循环
		while (img = img.offsetParent) {
			t += img.offsetTop;
		}
		return t;
	}

}