JS无限滚动、回到顶端和图片懒加载

前言

介绍页面无线滚动、回到顶端和图片懒加载的实现。

1 无限滚动（垂直）

要求：
1） 当访问者滚动到页面末端时，它会自动添加内容，
2） “滚动到末端”应该意味着访问者离文档末端的距离不超过 50px。

1.1 效果和代码

代码：
html

<div id="body">
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
	<h1>Scroll me</h1>
</div>

js

document.addEventListener("scroll",function(event){
	let height = document.documentElement.getBoundingClientRect().bottom - document.documentElement.clientHeight
	if(height > 50) return
	let node = document.createElement("h1")
	node.innerHTML = '你到底了'
	body.append(node)
})

如果你只想看代码，到这里就可以了。

1.2 过程解释

整体思路为：首先监听页面的滚动，接着在滚动条距离底部50px左右时触发添加内容的事件。

1.2.1 监听页面滚动

window.addEventListener和document.addEventListener都可以实现。

w3c 对此的解释是：
你使用window.addEventListener和document.addEventListener来处理页面上的事件，区别仅仅在于，不同事件模型上，处理的顺序不一样：

• 捕获，window先于document
• 冒泡，document先于window

这里不做延伸。如果有具体的大的区别，请各位看管姥爷在评论区留下评论。

1.2.2 获取距页面底部的距离

通过document.documentElement.getBoundingClientRect()获取整个dom对于窗口的距离。
document.documentElement就是这个玩意：

getBoundingClientRect就是这个玩意(图片引用自MDN)：

理解后，
初始化时：document.documentElement.getBoundingClientRect().top在页面初始化时为0，because整个文档相对于窗口top=0
document.documentElement.getBoundingClientRect().bottom就为整个页面的高度（包含可滚动的高度，500px），约等于（四舍五入）docuemnt.documentElement.offsetHeight（包含可滚动的高度）。
页面向下滚动20px时：document.documentElement.getBoundingClientRect().top为 -20，
document.documentElement.getBoundingClientRect().bottom为480。

这个时候我们使用document.documentElement.getBoundingClientRect().bottom - document.documentElement.clientHeight可以得到还未滚动的高度，当这个高度在50px左右时，执行我们的动作。

2 回到顶端

要求：
1） 当访问者页面垂直向下滑动超过一个窗口的距离，展示回到顶端的标志，点击回到顶端。

2.1 效果和代码

代码：
html

<div id="triangle" hidden>
</div>			
<div id="body">
	<script>
		for (let i = 0; i < 100; i++) document.writeln('<h1>Scroll me</h1>')
	</script>
</div>

js

document.addEventListener('scroll', function(event) {
	triangle.hidden = (pageYOffset <= document.documentElement.clientHeight)
})
triangle.onclick = function() {
	window.scrollTo({
		top: 0,
		behavior: "smooth"
	});
}

如果你只想看代码，到这里就可以了。

2.2 过程解释

使用pageYOffset 获取页面已滚动高度，对比页面高度，实现图标的是否隐藏。
使用scrollTo将页面的Y坐标定位至0（顶端）

3 图片懒加载

要求：
1） 当访问者页面垂直向下滑动超过一个窗口的距离，展示回到顶端的标志，点击回到顶端。

3.1 效果和代码

代码：
html

<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<img src="./loading.JPG" data-src="./IMG_0330.JPG">
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<img src="./loading.JPG" data-src="./IMG_2078.JPG">
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<h1>我可是图片的描述呢</h1>
<img src="./loading.JPG" data-src="./IMG_0228.JPG">

js

function isVisible(img) {
	let top = img.getBoundingClientRect().top
	let bottom = img.getBoundingClientRect().bottom
	let clientHeight = document.documentElement.clientHeight
	let topVisible = top > 0 && top < clientHeight
	let botttomVisible = bottom > 0 && bottom < clientHeight
	return topVisible || botttomVisible
}

function getImg() {
	let allImgs = document.querySelectorAll('img')
	for (let item of allImgs) {
		let imgDataSrc = item.dataset.src
		if (!imgDataSrc) continue
		if (isVisible(item)) {
			item.src = imgDataSrc + '?nocache=' + Math.random()
			item.dataset.src = ''
		}
	}
}

getImg()
document.addEventListener('scroll', getImg)

如果你只想看代码，到这里就可以了。

3.2 过程解释

我们看到，现在是待有图片展示到视窗内，才会加载这个图片的资源
整体思路为：<img src="./loading.JPG" data-src="./IMG_0228.JPG">首先使用loading的小图片占位，接着在图片滚动到可视页面内时加载，使用data-src里的内容替换src的内容，实现真正的资源加载。topVisible || botttomVisible是两个处理：第一个是判断图片的顶端首先出现在视图内（页面从上到下滚动），第二个是图片的底端出现在试图内（从下往上）。
我用的方法引用了getBoundingClientReat这个api，也可以使用offsetHeight减去已经垂直滚动的距离与可视页面的高度进行比较。

戛然而止，希望评论，就不放二维码了。

本文章禁止转载，请勿就转载之事联系作者。