流浪天下

背包行走,流浪天下

jQuery实现网页图片滚动显示(延迟加载)

本文最后更新于2014年3月29日,已超过半年没有更新,如果内容失效,请在评论区反馈,谢谢!

由于 流浪天下 网站上的图片比较多,每次打开的时候都会一次全部下载再显示,图片加载比较慢。jquery lazyload
现在好多网站都使用图片延迟加载(也称懒加载)技术,比如淘宝、迅雷等同一个页面图片比较多的网站,页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。

■ 缓载、预载的概念

最常用的图片加载有两种:

缓载:延迟加载图片或符合某些条件时才加载某些图片。
预载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。

两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。缓载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力。

■ 缓载的意义与实现

缓载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

主要体现在三种模式上:

第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟,如果用户在加载前就离开了页面,那么就不会加载。
第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。

■ 类库

Jquery的Lazy Load用于图片缓载,Jquery的PreLoad可以用于预载。这里主要介绍在网上看到 jQuery.Lazyload.js 这个基于的图片缓载插件,原理很简单,先将图片的真实地址缓存到img的一个自定义的属性(data-url)中,而img的src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。

<img src="images/grey.gif" data-url="真实地址" />

■ Lazyload主要属性

data_attribute string
存放图片真实地址的属性名,与HTML对应,默认是lazy-src。
container dom & selector
默认的容器为window,可自定义容器。
event stirng
触发图片加载的事件类型,默认为window.onscroll事件
effect String
显示效果,默认为show(直接显示),可选fadeIn(淡入),slideDown(下拉)等
threshold number
页面滚动到离图片还有指定距离的时候就进行加载,默认是0。
(未完,点击下页继续观看)



除非注明,流浪天下 文章均为原创,转载请以链接形式注明出处。查看声明
本文链接地址:
订阅本站:https://maie.name/feed打赏:https://maie.name/donation

背包客,徒步自助旅行爱好者,户外旅行风光爱好者。前逍遥山水间户外团队成员,“流浪天下”博客网站站长。背包旅行,流浪天下,行走的日子,我只是天堂的过客...

猜你也喜欢:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注