一：预加载

首先，我们需要引用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 += "
";                con += "    ";                con += "        ";                con += "        
       
        ";                con += "            
        
         
" + item.Company + "" + TMinjiCommon.FormatTime(item.PublishTime) + "
        
";                con += "            
        
";                con += item.OrderContent.substring(0, 20);                con += "            
";                con += "        
       
";                con += "        ";                con += "    ";                con += "
";            });             $("#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();});