jQuery 图片延迟加载的实现

2014-11-24 13:33:53 · 作者: · 浏览: 3

最近c2c电子商务已经进入优化阶段 ,我负责前台大多数的功能的实现 ,其实商品列表页,由于会显示很多的商品 ,要是一次性都显示出来,会造成服务器很大的压力,此时我们可以考虑当用户滑动滚动条的时候 ,图片显示出现在屏幕范围之内的时候在加载进来,这样就可以减少服务器一次性过多请求带来的压力了


此时我们用到jquery.js相信大家都知道的


还有一个延迟加载的jquery插件 jquery.scrollLoading.js


下面像大家介绍一下它的用法 ,很简单


下面是jquery.scrollLoading.js的源码:


在加载图片的地方可以这样



同事你也可以一次返回一个列表 ,比如你想一行几个图片的在屏幕的时候 ,这样你可以ajax放回一个list



页面加载完成前DIV显示loading图标,当该DIV的一部分在浏览器的可视范围内时,开始使用ajax加载data-url属性对应的HTML内容,正确返回后填充到该DIV里
赶快试试吧 很简单的。


现在淘宝或者京东这样的电子商务网站 ,都是这样类似实现的。