一、關於滾動顯屏載入

常常會有這樣子的頁面，內容很豐富，頁面很長，圖片較多。比如說淘寶商城頁面。頁面圖片數量多，而且比較大時。要是頁面載入就一次性載入完畢,需要使用者等半天。所以針對這種情況,目前很流行的做法就是滾動動態載入，顯示螢幕之外的圖片預設是不載入的，隨著頁面的滾動，這個要顯示圖片的區域進入了瀏覽器可是視窗範圍，則觸發圖片的載入顯示。這種做法的好處是，一是頁面載入速度快（瀏覽器轉啊轉的圈圈或是進度條很快就玩完了），二是節約了流量，因為不可能每個使用者瀏覽頁面時從頭滾到尾的。貌似我上面提到的幾個站點就是採用的這種做法，例如，我以迅雷不及掩耳的速度從淘寶商城首頁截下來的已觸發滾動載入但是未載入完畢的圖片：

這是提高前端效能，優化頁面載入速度很實用的做法。看上去這種技巧有些技術門檻，其實很簡單的。我們需要一個滾動事件，然後判斷元素是否在瀏覽器視窗，然後，顯示圖片（或是其他元素）就可以啦。我在jQuery庫下寫了個實現此效果的外掛，下面就將簡單展示講解此外掛的使用以及滾動動態載入的實現。

二、jQuery滾動載入外掛scrollLoading

雖然只有幾十行程式碼，但是為了方便使用，我還是將其外掛化了。外掛名為jquery.scrollLoading.js，您可以狠狠地點選這裡下載（右鍵 – [目標|連結]另存為），或是點選這裡下載mini壓縮版的。您可以狠狠地點選這裡：jQuery滾動載入圖片等demo

demo頁面中似乎有段破壞和諧的HTML片段，那是動態載入HTML後的效果，也就是說，此scrollLoading不僅可以用來滾動載入圖片，Ajax load頁面什麼的也是可以的。

三、scrollLoading使用

不管怎樣，首先呼叫jQuery庫檔案，還有jquery.scrollLoading.js，您可以直接在頁面的某處添上如下的程式碼：

1. <script type="text/javascript" src
   ="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
2. <script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>

此外掛的方法名就是scrollLoading，所以，直接：包裝器.scrollLoading();就可以實現滾動載入效果了，簡單的吧。如下：

1. $(".scrollLoading").scrollLoading();

表示所有class為scrollLoading的元素綁定了滾動載入的方法。當然，不可能真的就如此簡單，我們還需要做點小動作的。元素預設是不載入的，那麼真正的載入地址顯然要預先在元素上放置的，例如新浪微博預設把頭像地址綁在了一個自定義的”dynamic-src”屬性上，見下圖：

在HTML5中，以data-開頭的自定義屬性都是合法的，且地址可以是圖片，頁面等。所以，我設定了繫結地址的自定義屬性為”data-url”，此屬性值設為真實的圖片（或頁面）地址就可以了。例如下面：

1. <div class="scrollLoading" data-url="loaded.html">載入中...</div>

會在滾動時載入名為loaded.html的頁面，並自動替換裡面的內容。對於常用的圖片，還有一點小問題，就是其預設的src圖片地址。其src地址不能是真實的圖片地址（否則會直接一次性全部載入），也不能是空地址或是壞地址，否則IE瀏覽器下會出現很驚悚的紅叉叉。我的做法是預設連結的是一個1px * 1px的gif透明圖片（大小很小），同時可以透出後面載入中gif動畫圖片，當滾動載入的時候直接把此gif圖片替換掉。於是，對於圖片，可能就有類似下面的程式碼：

1. <img class="scrollLoading" data-url="http://image.zhangxinxu.com/image/study/head/s180/1.jpeg" src="http://www.zhangxinxu.com/study/image/pixel.gif" width="180" height="180" style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;" />

四、scrollLoading可選引數

scrollLoading是個很簡單很小的外掛（無註釋YUI compressor min版僅508B），所以引數也很少，就一個，見下表：

就這些了。此外掛只適用於頁面預設滾動條的動態載入。對於內部div之類的滾動載入不支援。

1. /*! 
2.  * jquery.scrollLoading.js 
3.  * by zhangxinxu  http://www.zhangxinxu.com 
4.  * 2010-11-19 v1.0 
5.  * 2012-01-13 v1.1 偏移值計算修改 position → offset 
6.  * 2012-09-25 v1.2 增加滾動容器引數, 回撥引數 
7. */
8. (function($) {  
9.     $.fn.scrollLoading = function(options) {  
10.         var defaults = {  
11.             attr: "data-url",  
12.             container: $(window),  
13.             callback: $.noop  
14.         };  
15.         var params = $.extend({}, defaults, options || {});  
16.         params.cache = [];  
17.         $(this).each(function() {  
18.             var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);  
19.             //重組
20.             var data = {  
21.                 obj: $(this),  
22.                 tag: node,  
23.                 url: url  
24.             };  
25.             params.cache.push(data);  
26.         });  
27.         var callback = function(call) {  
28.             if ($.isFunction(params.callback)) {  
29.                 params.callback.call(call.get(0));  
30.             }  
31.         };  
32.         //動態顯示資料
33.         var loading = function() {  
34.             var contHeight = params.container.height();  
35.             if ($(window).get(0) === window) {  
36.                 contop = $(window).scrollTop();  
37.             } else {  
38.                 contop = params.container.offset().top;  
39.             }         
40.             $.each(params.cache, function(i, data) {  
41.                 var o = data.obj, tag = data.tag, url = data.url, post, posb;  
42.                 if (o) {  
43.                     post = o.offset().top - contop, post + o.height();  
44.                     if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {  
45.                         if (url) {  
46.                             //在瀏覽器視窗內
47.                             if (tag === "img") {  
48.                                 //圖片，改變src
49.                                 callback(o.attr("src", url));         
50.                             } else {  
51.                                 o.load(url, {}, function() {  
52.                                     callback(o);  
53.                                 });  
54.                             }         
55.                         } else {  
56.                             // 無地址，直接觸發回撥
57.                             callback(o);  
58.                         }  
59.                         data.obj = null;      
60.                     }  
61.                 }  
62.             });   
63.         };  
64.         //事件觸發
65.         //載入完畢即執行
66.         loading();  
67.         //滾動執行
68.         params.container.bind("scroll", loading);  
69.     };  
70. })(jQuery);  

然後再你頁面引用

<script type="text/javascript" src="<span style="background-color: rgb(255, 255, 102);">jquery.</span>js"></script>

<script type="text/javascript" src="<span style="background-color: rgb(255, 255, 102);">jquery.</span>scrollLoading<span style="color: white; background-color: rgb(0, 170, 0);">.js</span>"></script>

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

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

$(function () {
    $(".lm").scrollLoading();
});

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

<div class="searchdiv" data-url="http://xxx.com/xx/imgList.action">
                    <img src="http://xxxx.com/ui-anim_basic_16x16.gif"
                        alt="" /></div>
js：
   $(function () {
                        $(".searchdiv").scrollLoading();
                    });

頁面載入完成前DIV顯示loading圖示，當該DIV的一部分在瀏覽器的可視範圍內時，開始使用ajax載入data-url屬性對應的HTML內容,正確返回後填充到該DIV裡
趕快試試吧 很簡單的。

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

使用例子:

http://www.zhangxinxu.com/study/201011/page-scroll-loading.html