Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用

前端图片延迟加载和滚动下拉加载

最近看到一篇文章,看了大牛的讲解,感觉整体还是比较容易理解的,可以尝试着玩玩。以下是转载的正文:前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这样的情况而言,开发者们不断的努力,很快就想到了解决的方案,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来,这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。 
 那么,图片延迟加载的技术具体如何实现呢?下面来做详细的介绍: 
首先,定义图片为三列,一共有5行,具体代码如下:  

3126f528-4229-4019-8698-7cf085f1e8bf.png


abc884da-5167-4ecb-9e03-def86e9eed6a.png

 
里面用到的bootstrap的布局技术(当然,这不是重点),请看img标签中的src,一开始我们并没有给它具体的图片的资源路径,而是自己定义了一个属性 x-src,该属性的值是图片图片的资源路径,每一行的img都是如此,接下来,当页面载入的时候,我们使用jquery(当然,你想javascript原生的代码也可以,我这里只是为了省时间而已)来循环遍历每一个img,判断每一个图片是否在当前可视区域内,是则显示图片,否则稍后处理,这里需要知道三个数据: 

             注:因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载,所以需要第三个数据,这个看个人的需求是什么,如果你的需求是图片只要已进入可视区域内就加载,可直接忽略第三个数据!!!! 

                                   1:浏览器可视区域的高度 

                                   2:图片相对于文档的偏移量(这里只需要高度上的偏移量) 

                                   3:图片元素本身的高度 

             如果图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度,即表明图片已经有一半进入的可视区域了,那么我就应该要把这张图片加载进来了,可是img标签的src是为空的,x-src的值才是图片的资源路径,这个时候就需要用jquery将img 标签的x-src值传给src,从而将图片加载进来,具体实现代码如下: 

d67418a9-a587-47a4-8d0b-fc4425a7dc2e.png

 
 
1
2018-03-26

2 个评论

$(selector).attr(attribute,value)
eg:
$(selector).attr(‘src’,‘/images/1.jpg’)
规定src属性的值为/images/1.jpg
谢谢分享。

要回复文章请先登录注册