如何使用原生js实现懒加载本文已参与「新人创作礼」活动，一起开启掘金创作之路本文主要分享的是仿美团外卖上滑的时候出现的

本文已参与「新人创作礼」活动，一起开启掘金创作之路

本文主要分享的是仿美团外卖上滑的时候出现的懒加载以及缓慢上移效果主要用到的有css3的transform: translateY()以及web api接口getBoundingClientRect()

html代码如下

<!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>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				padding: 40px 20px 0;
			}
			img {
				display: block;
				width: 100%;
				height: 300px;
				margin-bottom: 20px;
				transition: 1s;
			}
			.transform_img{
				transform: translateY(-20px);
				transition: 1s;
			}
		</style>
	</head>
	<body>
		<img data-src="./images/1.jpg" alt="">
		<img data-src="./images/2.jpg" alt="">
		<img data-src="./images/3.jpg" alt="">
		<img data-src="./images/4.jpg" alt="">
		<img data-src="./images/5.jpg" alt="">
		<img data-src="./images/6.jpg" alt="">
		<img data-src="./images/7.jpg" alt="">
		<img data-src="./images/8.jpg" alt="">
		<img data-src="./images/9.jpg" alt="">
		<img data-src="./images/10.jpg" alt="">
		<img data-src="./images/11.jpg" alt="">
		<img data-src="./images/12.jpg" alt="">
		<img data-src="./images/13.jpg" alt="">
		<img data-src="./images/14.jpg" alt="">
		<img data-src="./images/15.jpg" alt="">
	</body>
</html>

JS代码：

	<script>
		// 获取dom中需要懒加载的元素
		var imgs = document.querySelectorAll('img')

		// offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
		function getTop(el) {
			var top = el.offsetTop
			while (el = el.offsetParent) {
				top += el.offsetTop
			}
			return top
		}

		function lazyLoad(imgs) {
			// 获取可视区域高度
			var height = document.documentElement.clientHeight
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			for (var i = 0; i < imgs.length; i++) {
				// 获取元素大小及相对视口的位置
				var bound = imgs[i].getBoundingClientRect()
				if (bound.top > height) {
					// 移除已添加的class样式,下次重新上滑的时候重新赋值才会还能出现上移效果
					imgs[i].removeAttribute('class')
				}

				if (height + scrollTop > getTop(imgs[i])) {
					// 给图片属性src赋值
					imgs[i].src = imgs[i].getAttribute('data-src')
					// 给图片元素添加写有上移效果的class类名
					imgs[i].classList.add('transform_img')
				}
			}
		}

		// 在页面加载和onscroll()在滚动条滚动的时候触发
		window.onload = window.onscroll = function() {
			lazyLoad(imgs)
		}
	</script>

至于图片的话，可以自己去网上下载一些图片查看效果或者点击这里直接下载资源包，解压打开直接可查看