标签 JavaScript 图片懒加载 下的文章 - 星启寒博客
首页
关于
留言
友链
更多
在线壁纸
公益主机
搜 索
1
彩虹易支付最新版本
148 阅读
2
本网站资助人员感谢贴
75 阅读
3
简单记录一下吧
71 阅读
4
开源zYYO主页优雅多主题切换
60 阅读
5
【实用代码】JS常用正则校验大全
49 阅读
精美图文
技术教程
源码软件
新闻日报
登录
/
注册
搜 索
标签搜索
图文
js
【实用代码】JS常用正则校验大全
熙鹤订单查询+多插件1.7.1
php
新闻
日报
JavaScript 图片懒加载
开源zYYO主页优雅多主题切换
zyyo
主页
个人官网
个人主页
彩虹易支付
最新版本
支付系统
赞助
安全通告
ssh
单兵渗透
星启寒
累计撰写
13
篇文章
累计收到
3
条评论
首页
栏目
精美图文
技术教程
源码软件
新闻日报
页面
关于
留言
友链
在线壁纸
公益主机
用户登录
登录
注册
找到
1
篇与
JavaScript 图片懒加载
相关的结果
2024-03-15
JavaScript 图片懒加载
事件监听监听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) }) HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片"> <img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片"> <script src="js/index.js"></script> </body> </html>
2024年03月15日
45 阅读
0 评论
0 点赞