最近c2c电子商务已经进入优化阶段 ，我负责前台大多数的功能的实现 ，其实商品列表页，由于会显示很多的商品 ，要是一次性都显示出来，会造成服务器很大的压力，此时我们可以考虑当用户滑动滚动条的时候 ，图片显示出现在屏幕范围之内的时候在加载进来，这样就可以减少服务器一次性过多请求带来的压力了
此时我们用到jquery.js相信大家都知道的
还有一个延迟加载的jquery插件 jquery.scrollLoading.js
下面像大家介绍一下它的用法 ，很简单
下面是jquery.scrollLoading.js的源码：
[javascript] view plain copy
1. /*
2. * jquery.scrollLoading.js
3. * by zhangxinxu http://www.zhangxinxu.com
4. * 2010-11-19 v1.0
5. */
6. (function ($) {
7. function (options) {
8. var defaults = {
9. "data-url"
10. };
11. var params = $.extend({}, defaults, options || {});
12. params.cache = [];
13. this).each(function () {
14. var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
15. if (!url) { return; }
16. //重组
17. var data = {
18. this),
19. tag: node,
20. url: url
21. };
22. params.cache.push(data);
23. });
24.
25. //动态显示数据
26. var loading = function () {
27. var st = $(window).scrollTop(), sth = st + $(window).height();
28. function (i, data) {
29. var o = data.obj, tag = data.tag, url = data.url;
30. if (o) {
31. post = o.position().top;
32. if (post < 10)
33. post = o.offset().top;
34. posb = post + o.height();
35.
36. if ((post > st && post < sth) || (posb > st && posb < sth)) {
37. //在浏览器窗口内
38.
39. if (tag === "img") {
40. //图片，改变src
41. "src", url);
42. else if (tag == "iframe") {
43. "src", url);
44. else if (tag == "span") {
45. eval（url);
46. }
47. else {
48. o.load(url);
49. }
50. null;
51. }
52. }
53. });
54. return false;
55. };
56.
57. //事件触发
58. //加载完毕即执行
59. loading();
60. //滚动执行
61. "scroll", loading);
62. };
63. })(jQuery);
然后再你页面引用
[javascript] view plain copy
1. <script type="text/javascript" src="jquery.js"></script>
2.
3. <script type="text/javascript" src="jquery.scrollLoading.js"></script>
在加载图片的地方可以这样
[html] view plain copy
1. <img data-url="http://xxx.com/898.jpg.167_167.jpg" class="lm" align="absmiddle" width="167" height="167"/> 然后再加一段js就可以了
[javascript] view plain copy
1. $(function () {
2. ".lm").scrollLoading();
3. });
这样就搞定 屏幕中出现这个图片的时候，才会进行加载，是不是很方便，
同事你也可以一次返回一个列表 ，比如你想一行几个图片的在屏幕的时候 ，这样你可以ajax放回一个list
[html] view plain copy
1. <div class="searchdiv" data-url="http://xxx.com/xx/imgList.action">
2. <img src="http://xxxx.com/ui-anim_basic_16x16.gif"
3. alt="" /></div>
4. js：
5. $(function () {
6. $(".searchdiv").scrollLoading();
7. }); 上面代码解释：
页面加载完成前DIV显示loading图标，当该DIV的一部分在浏览器的可视范围内时，开始使用ajax加载data-url属性对应的HTML内容,正确返回后填充到该DIV里
赶快试试吧 很简单的。
现在淘宝或者京东这样的电子商务网站 ，都是这样类似实现的。
最近c2c电子商务已经进入优化阶段 ，我负责前台大多数的功能的实现 ，其实商品列表页，由于会显示很多的商品 ，要是一次性都显示出来，会造成服务器很大的压力，此时我们可以考虑当用户滑动滚动条的时候 ，图片显示出现在屏幕范围之内的时候在加载进来，这样就可以减少服务器一次性过多请求带来的压力了
此时我们用到jquery.js相信大家都知道的
还有一个延迟加载的jquery插件 jquery.scrollLoading.js
下面像大家介绍一下它的用法 ，很简单
下面是jquery.scrollLoading.js的源码：
[javascript] view plain copy
1. /*
2. * jquery.scrollLoading.js
3. * by zhangxinxu http://www.zhangxinxu.com
4. * 2010-11-19 v1.0
5. */
6. (function ($) {
7. function (options) {
8. var defaults = {
9. "data-url"
10. };
11. var params = $.extend({}, defaults, options || {});
12. params.cache = [];
13. this).each(function () {
14. var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
15. if (!url) { return; }
16. //重组
17. var data = {
18. this),
19. tag: node,
20. url: url
21. };
22. params.cache.push(data);
23. });
24.
25. //动态显示数据
26. var loading = function () {
27. var st = $(window).scrollTop(), sth = st + $(window).height();
28. function (i, data) {
29. var o = data.obj, tag = data.tag, url = data.url;
30. if (o) {
31. post = o.position().top;
32. if (post < 10)
33. post = o.offset().top;
34. posb = post + o.height();
35.
36. if ((post > st && post < sth) || (posb > st && posb < sth)) {
37. //在浏览器窗口内
38.
39. if (tag === "img") {
40. //图片，改变src
41. "src", url);
42. else if (tag == "iframe") {
43. "src", url);
44. else if (tag == "span") {
45. eval（url);
46. }
47. else {
48. o.load(url);
49. }
50. null;
51. }
52. }
53. });
54. return false;
55. };
56.
57. //事件触发
58. //加载完毕即执行
59. loading();
60. //滚动执行
61. "scroll", loading);
62. };
63. })(jQuery);
然后再你页面引用
[javascript] view plain copy
1. <script type="text/javascript" src="jquery.js"></script>
2.
3. <script type="text/javascript" src="jquery.scrollLoading.js"></script>
在加载图片的地方可以这样
[html] view plain copy
- <img data-url="http://xxx.com/898.jpg.167_167.jpg" class="lm" align="absmiddle" width="167" height="167"/>
然后再加一段js就可以了
[javascript] view plain copy
1. $(function () {
2. ".lm").scrollLoading();
3. });
这样就搞定 屏幕中出现这个图片的时候，才会进行加载，是不是很方便，
同事你也可以一次返回一个列表 ，比如你想一行几个图片的在屏幕的时候 ，这样你可以ajax放回一个list
[html] view plain copy
1. <div class="searchdiv" data-url="http://xxx.com/xx/imgList.action">
2. <img src="http://xxxx.com/ui-anim_basic_16x16.gif"
3. alt="" /></div>
4. js：
5. $(function () {
6. $(".searchdiv").scrollLoading();
7. }); 上面代码解释：
页面加载完成前DIV显示loading图标，当该DIV的一部分在浏览器的可视范围内时，开始使用ajax加载data-url属性对应的HTML内容,正确返回后填充到该DIV里
赶快试试吧 很简单的。
现在淘宝或者京东这样的电子商务网站 ，都是这样类似实现的。
