jQuery 圖片延遲加載的實現

最近c2c電子商務已經進入優化階段 ，我負責前台大多數的功能的實現 ，其實商品列表頁，由於會顯示很多的商品 ，要是一次性都顯示出來，會造成服務器很大的壓力，此時我們可以考慮當用戶滑動滾動條的時候 ，圖片顯示出現在屏幕范圍之內的時候在加載進來，這樣就可以減少服務器一次性過多請求帶來的壓力了

此時我們用到jquery.js相信大家都知道的

還有一個延遲加載的jquery插件 jquery.scrollLoading.js

下面像大家介紹一下它的用法 ，很簡單

下面是jquery.scrollLoading.js的源碼：

1. /*
2. * jquery.scrollLoading.js
3. * by 88181 http://www.88181.com
4. * 2010-11-19 v1.0
5. */
6. (function ($) {
7. $.fn.scrollLoading = function (options) {
8. var defaults = {
9. attr: "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. obj: $(this),
19. tag: node,
20. url: url
21. };
22. params.cache.push(data);
23. });
25. //動態顯示數據
26. var loading = function () {
27. var st = $(window).scrollTop(), sth = st + $(window).height();
28. $.each(params.cache, 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();
36. if ((post > st && post < sth) || (posb > st && posb < sth)) {
37. //在浏覽器窗口內
39. if (tag === "img") {
40. //圖片，改變src
41. o.attr("src", url);
42. } else if (tag == "iframe") {
43. o.attr("src", url);
44. } else if (tag == "span") {
45. eval(url);
46. }
47. else {
48. o.load(url);
49. }
50. data.obj = null;
51. }
52. }
53. });
54. return false;
55. };
57. //事件觸發
58. //加載完畢即執行
59. loading();
60. //滾動執行
61. $(window).bind("scroll", loading);
62. };
63. })(jQuery);

1. <script type="text/javascript" src="jquery.js"></script>
3. <script type="text/javascript" src="jquery.scrollLoading.js"></script>

在加載圖片的地方可以這樣

1. <img data-url="http://88181.com/898.jpg.167_167.jpg" class="lm" align="absmiddle" width="167" height="167"/>

1. $(function () {
2. $(".lm").scrollLoading();
3. });

同事你也可以一次返回一個列表 ，比如你想一行幾個圖片的在屏幕的時候 ，這樣你可以ajax放回一個list

1. <div class="searchdiv" data-url="http://88181.com/xx/imgList.action">
2. <img src="http://x88181.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裡
趕快試試吧 很簡單的。

現在淘寶或者京東這樣的電子商務網站 ，都是這樣類似實現的。