懒加载实践--js图片懒加载及优化
一、前言
为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB。当页面图片过多的时候,页面加载速度很缓慢,一个页面加载几秒没有完成,用户体验不好,会丧失很多用户的。
所以对于图片过多的页面,可以为了加速页面加载速度,很多时候我们需要将页面内未出现的可视区域内的图片先不加载,等到滚动到可视区的时候录再去加载。这样子对于页面加载性能上会有很大的提升,也就提高了用户体验。
二、原理
1、将页面中的img标签src指向一张小图片或者src为空,
2、然后定义data-src属性(这个属性可以自定义命名,我才用data-src)属性指向真实的图片。
3、src指向一张默认的图片,否则当src为空的时候也会像服务器发送一次请求(指向默认的一张图片那就只需要请求一次)。可以指向loading的地址。
4、当载入页面时,先把可视区区域内的img标签的data-src属性值赋值给src。
5、然后监听滚动事件,加载用户即将看到的图片(利用图片出现时距离顶部的高度 < 滚动条距离顶部的高度 + 可视区的高度)。
注意:图片要指定宽高
关于窗口各种宽度,给出网上的好图。
三、图片懒加载的实现代码
<!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>Document</title><style>img {display: block;margin-bottom: 50px;width: 800px;height: 400px;}</style>
</head>
<body><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg6.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg7.png" alt=""><img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t" alt=""><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg" alt=""><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t" alt=""><img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg8.png" alt=""><img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg10.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg11.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg15.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg16.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg17.png" alt="">
<script>(function(){let num = document.getElementsByTagName('img').length;let img = document.getElementsByTagName("img");let n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历lazyload(); //页面载入完毕加载可是区域内的图片window.onscroll = lazyload;function lazyload() { //监听页面滚动事件let seeHeight = document.documentElement.clientHeight; //可见区域高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度for (let i = n; i < num; i++) {// 图片未出现时距离顶部的距离大于滚动条距顶部的距离+可视区的高度if (img[i].offsetTop < seeHeight + scrollTop) {if (img[i].getAttribute("src") == "") {img[i].src = img[i].getAttribute("data-src");}n = i + 1;}}}})()</script>
</body>
</html>
四、使用节流函数进行优化
如果直接将函数绑定在scroll事件上,当页面滚动时,函数会被高频触发,这非常影响浏览器性能。
同时还有以下场景往往由于事件频繁被触发,因而频繁执行dom操作,资源加载等重行为,导致UI停顿甚至浏览器奔溃。
1、window对象的resize,scroll事件;
2、拖拽时的mousemove事件;
3、射击游戏中的mousedown,keydown事件;
4、文字输入,自动完成的keyup事件;
解决这个问题的方法有去防抖和节流的方法:
1、防抖动原理:当调用动作n毫秒后,才会执行,若这n毫秒内又调用此动作则重新计算执行时间。
不足:当我一直滚动鼠标的时候,lazyload函数就会不断被延迟,这样只有停下来的时候才会执行,那么再有些需要及时显示的情况下,就显得不那么友好了
2、节流原理:预设一个执行周期,如果这个周期结束了都还没有触发函数,那就会执行一次函数;如果这个周期还没有结束就触发函数,那定时器将重置,开始新周期。
达到了想要的效果,既没有频繁的执行也没有延迟执行
五、运用节流函数的图片懒加载代码
<!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>Document</title><style>img {display: block;margin-bottom: 50px;width: 800px;height: 400px;}</style>
</head>
<body><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg6.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg7.png" alt=""><img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t" alt=""><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg" alt=""><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t" alt=""><img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg8.png" alt=""><img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg10.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg11.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg15.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg16.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg17.png" alt="">
<script>(function(){let num = document.getElementsByTagName('img').length;let img = document.getElementsByTagName("img");let n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历lazyload(); //页面载入完毕加载可是区域内的图片function lazyload() { //监听页面滚动事件let seeHeight = document.documentElement.clientHeight; //可见区域高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度for (let i = n; i < num; i++) {// 图片未出现时距离顶部的距离大于滚动条距顶部的距离+可视区的高度if (img[i].offsetTop < seeHeight + scrollTop) {if (img[i].getAttribute("src") == "") {img[i].src = img[i].getAttribute("data-src");}n = i + 1;}}}//采用了节流函数function throttle(fun, delay, time) {let timeout,startTime = new Date();return function() {let context = this,args = arguments,curTime = new Date();clearTimeout(timeout);// 如果达到了规定的触发时间间隔,触发 handlerif (curTime - startTime >= time) {fun.apply(context, args);startTime = curTime;// 没达到触发间隔,重新设定定时器} else {timeout = setTimeout(fun, delay);}};
};
window.addEventListener('scroll',throttle(lazyload,500,1000));})()
</script>
</body>
</html>
【谢谢关注和阅读,后续新的文章首发:sau交流学习社区:https://www.mwcxs.top/】
懒加载实践--js图片懒加载及优化相关推荐
- [js] 图片懒加载
懒加载使用场景 在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...
- html加载完显示图片,js图片未加载完显示loading效果
js图片未加载完显示loading效果 img{float:left;200px;height:200px;margin:0 10px 10px 0} //判断浏览器 var Browser=new ...
- JAVA实现图片加水印及Base64图片字符串加水印
JAVA实现图片加水印及Base64图片字符串加水印 可将根据不同需求选择场景一,场景二来实现家水印操作,个人感觉比我上一遍文章<base64字符串加水印 >实在 场景一: 涉及上送过来的 ...
- js图片懒加载的第二种方式
这种方式是图片按照顺序一张一张的加载直到所有图片都加载完成 html 同样的要让图片进行懒加载,路径引用就得用 data-src <ul><li><img data-sr ...
- js 图片懒加载最好的方法
图片懒加载多种方法 第一种 是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...
- js图片懒加载原理、实现及节流优化
1.懒加载原理 在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src. 2.具体实现 1. 效果 2. ...
- vue java图片懒加载_vue 实现图片懒加载功能
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2, ...
- ios wkweb设置图片_ios·WKWebView\UIWebView加载HTMLString,实现图片懒加载
背景: 项目中开发商品类型数据,数据可变性较大,所以商品详情数据存在文案和图片富文本显示,后台返回了html格式的数据供前端展示. 如果用webView直接显示的话,需要等html内容完全展示才能获取 ...
- “懒”的妙用——浅析图片懒加载技术
1.定义 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...
最新文章
- R语言偏相关或者部分相关性系数计算实战:使用psych包计算(Partial Correlation)偏相关系数、拟合回归模型使用两个回归模型的残差计算偏相关性系数
- [转]你在修佛,还是在修魔
- 自己动手构建iSCSI磁盘阵列
- linux一切皆文件之tty字符设备(深入理解sshd创建pty的过程) (五)
- java B2B2C springmvc mybatis仿淘宝电子商城系统(十)用spring Restdocs创建API文档
- 关于jrebel碰到的一次问题记录
- 【转载】Java 性能优化之String
- Docker 禁止被列入美国“实体名单”的国家、企业、个人使用
- Linux kernel中网络设备的管理
- 如何验证 nginx.conf 是否配置正确
- Linux系统——sqlist数据库
- php微信上传临时素材,PHP实战:php微信开发之上传临时素材
- QT 代码添加QScrollArea
- python爬取5442网站图片
- python爬虫之——爬取煎蛋网图片
- 同花顺面经(二面挂)
- CV文章摘要中文翻译集(目标检测,纹理分类)
- 软件公司的岗位职责 - IT项目经理
- mantis的安装配置(for windows)
- P2P终结者---控制整个局域网网络的管理软件
热门文章
- chubby中文意思
- 王国维的人生三重境界(图)
- python open函数编码_python中的open函数如何编码?
- linux扩容文件系统resize2fs,linux resize2fs命令设置方法
- resize2fs安装及resize2fs、ext2online系统文件扩容
- PHP Comparision Operater
- 动物识别专家系统-js
- Slowfast环境配置问题 | 安装PyAV报错An error occurred while installing package ‘conda-forge::olefile-0.46-pyh9f
- 什么标准规定了aes加密_aes 128标准加密使用哪些字符
- Oracle判断两个时间段是否有重叠