圖片延遲加載和滑動翻頁

一：預加載

首先，咱們須要引用JS，

<script src="/Scripts/JQuery.LazyLoad.js"></script>

其次，修改img的格式爲：

<img data-original="/images/img01.png" src="/images/grey.gif"><span>收藏</span></a>

注意，data-original中的path纔是圖片真是的地址，

最後，咱們須要：

$(function () {
    $("img").lazyload({
        effect: "fadeIn"
    });
});

那麼，問題來了，動態加載的圖片是否也能夠這麼處理呢。原理上，是的，可是要注意，ajax動態加載的圖片須要在 ajax 的success 中再次調用一遍上面的代碼：

即相似：

var getPreOrders = function () {
    $.ajax({
        type: "post",
        datatype: "json",
        url: "/PreOrder/GetTop10PreOrder",
        success: function (data) {
            if (data.F == 1) {
                alert(data.M);
                return;
            } 

            var con = "";
            $.each(data.O, function (i, item) {
                if (i > 3)
                    return; 

                con += "<li>";
                con += "    <a href=''>";
                con += "        <img data-original='" + item.ImgPath + "' src='/images/grey.gif' />";
                con += "        <div class='zhiziimg'>";
                con += "            <div class='dingtop'><h2>" + item.Company + "<span>" + TMinjiCommon.FormatTime(item.PublishTime) + "</span></h2></div>";
                con += "            <p>";
                con += item.OrderContent.substring(0, 20);
                con += "            </p>";
                con += "        </div>";
                con += "        <span class='sjx'></span>";
                con += "    </a>";
                con += "</li>";
            }); 

            $("#dingzhi").html(con);
            $("img").lazyload({
                effect: "fadeIn"
            });
            //alert(con);
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });
};

why不解釋。

 

二：滾動翻頁

很簡單，只要以下：

$(window).scroll(function () {
    // 當滾動到最底部以上100像素時， 加載新內容  
    if ($(document).height() - $(this).scrollTop() - $(this).height() < 100)
    {
        //alert("xxx");
    }
    //loadMore();
});