图片延迟加载和滑动翻页

一：预加载

首先，我们需要引用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();
});