前端图片延迟加载详细讲解
![](http://www.gbtags.com/gb/networks/uploadimgthumb/2d47df98-dca1-45a3-bcd7-44148a688a9b.png)
原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的,没想到下午公司项目出现了一些问题,所以一直在改代码进行调试,今天白天一整天又在外面跑,回来已经傍晚了,刚吃完饭,就想着赶紧补上,这样很多不懂这方面具体实现的小伙伴们也能早点学习经验。
前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这样的情况而言,开发者们不断的努力,很快就想到了解决的方案,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来,这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。
那么,图片延迟加载的技术具体如何实现呢?下面来做详细的介绍:
首先,定义图片为三列,一共有5行,具体代码如下:
里面用到的bootstrap的布局技术(当然,这不是重点),请看img标签中的src,一开始我们并没有给它具体的图片的资源路径,而是自己定义了一个属性 x-src,该属性的值是图片图片的资源路径,每一行的img都是如此,接下来,当页面载入的时候,我们使用jquery(当然,你想javascript原生的代码也可以,我这里只是为了省时间而已)来循环遍历每一个img,判断每一个图片是否在当前可视区域内,是则显示图片,否则稍后处理,这里需要知道三个数据:
注:因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载,所以需要第三个数据,这个看个人的需求是什么, 如果你的需求是图片只要已进入可视区域内就加载,可直接忽略第三个数据!!!!
1:浏览器可视区域的高度
2:图片相对于文档的偏移量(这里只需要高度上的偏移量)
3:图片元素本身的高度
如果图片先对于文档的偏移量+图片元素本身的高度的一半 < 浏览器可视区域的高度,即表明图片已经有一半进入的可视区域了,那么我就应该要把这张图片加载进来了,可是img标签的src是为空的,x-src的值才是图片的资源路径,这个时候就需要用jquery将img 标签的x-src值传给src,从而将图片加载进来,具体实现代码如下:
具体的效果如下:
你可以在控制台看到,虽然我们有5行图片,每行有3列,但加载进来的图片只有第一列(图片高度有超出一半的img才会加载图片的资源进来),其他的都没有加载进来,这就使得图片的刷新会很快出现效果,那么接下来,用户需要看到更多的图片,这个时候需要进行滚动条往下滚动,去刷新更多的图片,那么这个时候我们除了上述的3个数据之外,还需要知道当前滚动条滚动的距离,如果:
图片先对于文档的偏移量+图片元素本身的高度的一半 < 浏览器可视区域的高度 + 当前滚动条滚动的距离,那么表明当前图片已经在可视区域内,并且图片有一半以上的高度是在可视区域内,那么将图片进行加载进来,具体代码如下:
具体效果如下:
在控制台你可以看到,随着滚动条的滚动,加载进来的图片由原来的三张变成了现在的六张,滚动条不断的往下滚动,图片就会不断的加载进来,从而得到更好的用户体验。
这就是图片延迟加载的具体实现,是不是觉得图片的炫酷,如果你想自己看下具体的实现效果,可以点击我的网址进行查看:
http://meichao.sinaapp.com/show.html
如果还有什么不明白的,可以直接QQ联系本人:447247261 欢迎大家一起相互探讨,相互进步
前端图片延迟加载详细讲解相关推荐
- 520 抖音哄女友图片动画+详细讲解
效果的实现其实只依赖CSS3的"3D转换","动画"和"过渡" 1. css部分 .container{width:800px;height ...
- 前端mock数据详细讲解
在实际的项目研发过程中,我们经常会遇到如下的尴尬场景: 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小伙子自己参照ui设计图,完成对应的静态页面(没有数据交 ...
- 前端防抖与节流超详细讲解
前端防抖与节流超详细讲解 前言 防抖 什么是防抖 实现防抖函数 节流 什么是节流 实现节流函数 防抖与节流注意事项 前言 防抖与节流通常作为项目优化的手段,一般都是为了防止用户在短时间内快而频地多次操 ...
- Shopify 二次开发 图片CDN参数详细讲解
Shopify 前端开发 图片尺寸参数讲解 本人 兼职 shopify.店匠二次开发.仿站.定制等开发服务,有需要的可以加我微信 abc939039210,备注 shopify 摘要 对于刚入手sho ...
- c语言图片透明度混合,【PS CC 2018 学习连载 19】如何让图层与图层之间融合的更好?不透明度和混合模式详细讲解...
原标题:[PS CC 2018 学习连载 19]如何让图层与图层之间融合的更好?不透明度和混合模式详细讲解 说起图层,根据之前的连载,已经学习了不少内容,比如: 但以上内容,都只是对图层的理解以及对指 ...
- 2.5万字详细讲解个人网站的开发过程和项目的部署
目录 简介 1 技术介绍 1.1 个人博客功能 1.2 技术组合 1.3 工具与坏境 2 项目的环境配置 2.1 vue的环境配置 2.2 解决跨域问题 2.3 关于图标的获取 3 前端技术 3.1 ...
- 聊一聊前端图片懒加载背后的故事
本文内容 什么是懒加载 如何实现懒加载 监听滚动事件 IntersectionObserver 浏览器原生方案 本文小结 相信大家已经注意到我博客有了一点变化,因为博主最近利用空闲时间对博客进行了优化 ...
- Python新手爬虫训练小项目《爬取彼岸图网》(超详细讲解版)
Python新手爬虫训练小项目<爬取彼岸图网>(超详细讲解版) 这是我的第一篇文章,作为一名新手爬虫,这个算是我这几天来的努力成果,虽然代码寥寥几行但花费了大半天,新手上路还是不能只看视频 ...
- 在html语言中建立网页链接,HTML代码实例:详细讲解超级链接
HTML代码实例:详细讲解超级链接 互联网 发布时间:2009-04-02 20:55:27 作者:佚名 我要评论 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级 ...
最新文章
- Ubuntu10.04下PDF中文无法显示或显示乱码的解决方法
- 天问一号火星探测器已飞离地球800多万公里 多个载荷完成自检
- 字节面试现场,问我如何高效设计一个LRU
- C#笔记(二):委托与事件
- 【NLP】保姆级教程:手把手带你CNN文本分类(附代码)
- smarty能创建 php页面,smarty 生成静态html页面
- 不写代码不用Excel,如何制作高大上的财务分析?
- Git学习系列(一)初识Git
- 更改配置本地host地址
- (原)SCOR模型在化工行业的应用
- FishC《零基础学习python》笔记--第002讲:用Python设计第一个游戏
- IIS6.0架设网站常见问题
- MapReduce的Reducer类
- 我与鸟哥 Yar 的亲密接触
- 01_CSS简介.html
- 使用Scrum进行敏捷项目管理的10个简单步骤
- 德语语法笔记——名词的变格
- jetson xavier nx 系统及相关环境配置(cuda,torchvision,torch,tensorflow,opencv)
- ROS系统安装Kinetic(零基础教程)
- 隐私计算--25--联邦学习激励机制
热门文章
- python pypy_Python之父的加速秘籍:PyPy能让代码运行得更快!
- LVS介绍以及工作模式案例
- 企业员工管理系统开发
- Redshift 简介
- 2012微软“创新杯”全球学生大赛启动了
- 无卷积步长或池化:用于低分辨率图像和小物体的新 CNN 模块SPD-Conv
- 静子 今天的漫画上色图欣赏
- bootstarp怎么使盒子到最右边_海美迪H7Plus电视盒子:配置喜人,还没有广告?爱了!...
- 西行印度 Moonfrog,Panda 侃技术聊游戏建友谊
- 如何不解锁BL刷入Android 12/安卓程序员预览版或者刷回Android 11