图片延迟加载和滑动翻页-阿里云开发者社区

图片延迟加载和滑动翻页

2017-07-08 971

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

一：预加载

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