原來做過的商城專案現在需要增加下拉載入的功能，簡單的實現了一下。大概可以整理一下思路跟程式碼。

把需要下拉載入的內容進行轉為JSON處理存在當前頁面：

<script type="text/javascript">var objson = eval([{"Id":"5991","product_name":"正品璐瑤頸肩按摩器  披肩頸椎按摩","order_by":"98569","is_show":"True","price":"428","sale_price":"399","Images":"saxjua16.jpg"},{"Id":"5990","product_name":"多功能絞肉機  家用料理機 電動攪拌機","order_by":"98568","is_show":"True","price":"429","sale_price":"399","Images":"d2yjivhl.jpg"},....更多省略]</script>

下面就是javascript程式碼的事情了

<script type="text/javascript">
        $(document).ready(function () {
            var totalheight = 0;
            function loadData() {
                totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
                if ($(document).height() <= totalheight) {
                    GetProducts();//載入資料
                }
            }
            $(document).scroll(
 
function () {
                loadData();
            });

            function GetProducts() {
                var htmlSource;
                var iIndex = 6; //每次載入元素數量
                var icount = parseInt($("#hidJsonCount").val()); //已載入數量 作為for下標值
                var obj = objson;
                
 
if (obj.length - icount < 6) {
                    iIndex = obj.length - icount;
                }
                if (icount < obj.length) {
                    for (var i = icount; i < (icount+iIndex); i++) {
                        var val = obj[i];
                        htmlSource += '<div class="deal">';
                        htmlSource += '<a href="p_show.aspx?productId=' + val.Id + '" target="_blank">';
                        htmlSource += '<img src="http://www.baidu.com/upload-file/images/product/' + val.Images + '" alt="" border="0" title="' + val.product_name + '"></a>';
                        htmlSource += '<h3>';
                        htmlSource += '<a href="p_show.aspx?productId=' + val.Id + '" title="' + val.product_name + '" target="_blank">' + val.product_name + '</a>';
                        htmlSource += '</h3>';
                        htmlSource += '<h4>';
                        htmlSource += '<em><b>¥</b>' + val.sale_price + '</em><a href="p_show.aspx?productId=' + val.Id + '" target="_blank">檢視</a>';
                        htmlSource += '</h4>';
                        htmlSource += '<span class="newicon"></span>';
                        htmlSource += '</div>';
                    }
                    $("#hidJsonCount").val((icount + iIndex).toString());
                }
                $("#moreProduct").append(htmlSource);
            }
        });
    </script>

$("#hidJsonCount").val();此處為一個input hidden的隱藏標籤 用來儲存已經載入了多少資料。

至此功能完結。