原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的,没想到下午公司项目出现了一些问题,所以一直在改代码进行调试,今天白天一整天又在外面跑,回来已经傍晚了,刚吃完饭,就想着赶紧补上,这样很多不懂这方面具体实现的小伙伴们也能早点学习经验。
前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这样的情况而言,开发者们不断的努力,很快就想到了解决的方案,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来,这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。
那么,图片延迟加载的技术具体如何实现呢?下面来做详细的介绍:
首先,定义图片为三列,一共有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个数据之外,还需要知道当前滚动条滚动的距离
演示DEMO:
无限滚动加载数据
在控制台你可以看到,随着滚动条的滚动,加载进来的图片由原来的三张变成了现在的六张,滚动条不断的往下滚动,图片就会不断的加载进来,从而得到更好的用户体验。
分享到:
相关推荐
React waterfall 高性能无限滚动下拉加载
优化的图片异步加载和下拉刷新库,很多应用都在使用,避免重复造轮子
社交应用中,onPullDownRefresh下拉加载历史消息,与页面上的消息合并,滚动到下拉之前,页面不闪
ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: ...
listview实现下拉刷新,滚动加载
上拉刷新下拉加载,图片轮播,上拉刷新下拉加载支持自定义HeadView和FootView,图片轮播可以自定义样式和位置,完全满足需求
Framework7 滚动加载 图片滚动 下拉加载
ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件
下拉刷新与加载 自定义控件下拉刷新与加载 自定义控件下拉刷新与加载 自定义控件下拉刷新与加载 自定义控件下拉刷新与加载 自定义控件下拉刷新与加载 自定义控件
Android实现异步从网络加载图片列表和上拉加载更多、下拉刷新列表(使用xListView框架来实现)。。。。。。
h5下拉刷新上拉加载滚动条位置,返回列表时滚动到离开时的位置
用CSS做的图片滚动下拉效果广告代码
下拉刷新 上拉加载 ... 下拉刷新+上拉加载 下拉刷新+上拉加载 使用requirejs 下拉刷新+上拉加载 自定义dom 下拉刷新+上拉加载 固定头部 下拉刷新+上拉加载 tab一个实例 下拉刷新+上拉加载 tab多个实例
android的ListView上拉刷新下拉加载和列表头横向滚动(带表头与固定列)。 该demo是我结合网上的两个示例一个是上下拉刷新加载的ListView,一个是横向滚动带固定列和列表头.主要是自定义了两个控件(重写)ListView和...
很多人用ecshop或者shopex来做商城的时候,首页的图片太多导致首页在加载的时候特别的慢,这里呢给大家介绍个商城图片延时加载效果的方法,该方法是使用jS脚本控制真实图片加载的时间。原理技术当你网站打开显示屏幕...
swing之滚动条下拉加载数据示例源码!
只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性,没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度,包含内边距,不包括x轴的滚动条高度、...
jQuery模拟手机端下拉滚动加载内,在手机上是手指向上滑动屏幕,会立即加载内容,实现了一种多数据分布的加载效果。因为是到才加载,也就是异步加载,因此并不会影响网页的加载速度,如果在电脑上测试,你需要使用...
js+css,tab选项卡,每个选项可以上拉刷新数据,下拉加载更多
仿网易新闻APP的listview加载,滚动到底自动加载,下拉刷新,首次进入界面有下拉刷新功能