本帖最后由 一度 于 2024-3-30 16:19 编辑
监听scroll监听scroll这个事件。鼠标滚动就触发
我们需要知道两个高度 - 窗口显示区的高度 window.innerHeight
- 图片到视窗上边的距离高度 getBoundingClientRect().top
图片未能看见：图片距离视窗顶部的距离 > 窗口显示区的高度 图片能看见：图片距离视窗顶部的距离 < 窗口显示区的高度 一开始，可以将图片设置为 <img data-src=""> 其中 data- 为自定义属性，浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的 之后，添加滚动监听事件，为img 赋值 src 属性
- const images = document.querySelectorAll('img')
- window.addEventListener('scroll', e => {
- images.forEach(img => {
- // 获取图片到视窗上边的距离高度
- const imgTop = img.getBoundingClientRect().top
- // 图片到视窗上边的距离高度 < 窗口显示区的高度 ,这时候，才需要加载
- if (imgTop < window.innerHeight) {
- // 获取自定义属性
- const data_src = img.getAttribute('data-src')
- // 将自定义属性赋值给原本的 src 属性
- img.setAttribute('src', data_src)
- }
- })
- })
IntersectionObserver 观察属性IntersectionObserver 浏览器提供的构造函数，前提是浏览器能够支持 交叉观察：目标元素和可视窗口会产生交叉区域，交叉区域发生了什么事情，我们需要执行什么程序 - // 拿着望远镜的人 callback: 需要触发条件，然后执行 触发两次：1 目标元素看得见 2 目标元素看不见
- const observer = new IntersectionObserver(callback)
- // 具体观察那个节点
- observer.observe(Dom)
- // 取消观察
- observer.unobserve(Dom)
isIntersecting 是否交叉，即是否进行到可视区域 - const images = document.querySelectorAll('img')
- // 回调函数接受一个 数组参数
- const callback = entries => {
- entries.forEach(entry => {
- // 是否交叉，即是否进行到可视区域
- if (entry.isIntersecting) {
- // 获取图片节点
- const imgae = entry.target
- // 获取自定义属性
- const data_src = imgae.getAttribute('data-src')
- // 修改 src
- imgae.setAttribute('src', data_src)
- // 修改完属性之后，取消观察
- observer.unobserve(imgae)
- }
- })
- }
- // 拿着望远镜的人 callback: 需要触发条件，然后执行 触发两次：1 目标元素看得见 2 目标元素看不见
- const observer = new IntersectionObserver(callback)
- images.forEach(imgae => {
- // 具体观察那个节点
- observer.observe(imgae)
- })
isIntersecting 是否交叉，即是否进行到可视区域 - const images = document.querySelectorAll('img')
- // 回调函数接受一个 数组参数
- const callback = entries => {
- entries.forEach(entry => {
- // 是否交叉，即是否进行到可视区域
- if (entry.isIntersecting) {
- // 获取图片节点
- const imgae = entry.target
- // 获取自定义属性
- const data_src = imgae.getAttribute('data-src')
- // 修改 src
- imgae.setAttribute('src', data_src)
- // 修改完属性之后，取消观察
- observer.unobserve(imgae)
- }
- })
- }
- // 拿着望远镜的人 callback: 需要触发条件，然后执行 触发两次：1 目标元素看得见 2 目标元素看不见
- const observer = new IntersectionObserver(callback)
- images.forEach(imgae => {
- // 具体观察那个节点
- observer.observe(imgae)
- })
| 
发表于 2024-3-30 16:16:14