一：预加载
首先，我们需要引用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(); });
本文基于
Creative Commons Attribution 2.5 China Mainland License发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名
http://www.cnblogs.com/luminji（包含链接）。如您有任何疑问或者授权方面的协商，请给我留言。
