前言

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

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>

document.addEventListener("scroll",function(event){let height = document.documentElement.getBoundingClientRect().bottom - document.documentElement.clientHeightif(height > 50) returnlet 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>

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">

function isVisible(img) {let top = img.getBoundingClientRect().toplet bottom = img.getBoundingClientRect().bottomlet clientHeight = document.documentElement.clientHeightlet topVisible = top > 0 && top < clientHeightlet botttomVisible = bottom > 0 && bottom < clientHeightreturn topVisible || botttomVisible
}function getImg() {let allImgs = document.querySelectorAll('img')for (let item of allImgs) {let imgDataSrc = item.dataset.srcif (!imgDataSrc) continueif (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减去已经垂直滚动的距离与可视页面的高度进行比较。

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

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

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

JS使用onscroll、scrollTop实现图片懒加载
今天做到项目中的图片展示,由于每一页的图片数量都很多,因此需要为图片的展示设计一种懒加载的功能. 第一要做的当然就是给程序添加滚动监听事件. 1 //触发拉取图片开关,保证正在拉取时不能再次触发 2 ...
WEB前端实现图片懒加载 echo.js
echo.js是一个轻小的图片懒加载js插件,在使用过程中很多朋友可能是直接自定义一张占位图片,可能会造成图片的变形等.其实这并不是最佳的解决方案.下面给大家介绍另一种方法,简单的控制下css,实现l ...
【前端】图片懒加载的原理和三种实现方式
一. 图片懒加载的目的大型网站如常用的淘宝,京东等页面,需要展示大量的商品图片信息,如果打开网页时让所有图片一次性加载完成,需要处理很多次网络请求,等待加载时间比较长,用户体验感很差. 有一种常用的 ...
Html图片懒加载动画,Intersection Observer实现滚动到相应区域执行动画及图片懒加载...
Intersection observer API提供了一种方法,可以异步观察目标元素与祖先元素或相对于浏览器视口(root)的交集变化. 很多种情况下都需要用到元素交集变化的信息,例如:当页面滚动时 ...
dw自动滚动图片_3分钟搞定图片懒加载
什么是图片懒加载图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页). 为什么需要懒加载对于一个页面 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
jQuery图片懒加载示例（滚动函数再加载）
图片懒加载可以极大的减轻服务器请求的负担,如果没有做这样的操作,一个页面很多图片同时请求,就会渲染慢,影响用户体验! 原理其实很简单,就是滚动条拉下来显示的时候再加载显示出真实的图片,在不显示的区域的 ...
JS实现图片懒加载效果
文章目录前言一.图片实现懒加载步骤二.案例练习(三国女将) 1. html 代码 2. css 代码 3. js 代码执行结果前言懒加载时一种也页面效果,可以提高页面加载速率,并降低服务器 ...
[js] 图片懒加载
懒加载使用场景在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...

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

目录

前言

1 无限滚动（垂直）

1.1 效果和代码

1.2 过程解释

1.2.1 监听页面滚动

1.2.2 获取距页面底部的距离

2 回到顶端

2.1 效果和代码

2.2 过程解释

3 图片懒加载

3.1 效果和代码

3.2 过程解释

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

最新文章

热门文章