列表数据懒加载

发表于

<script src="__TMPL__Public/js/jquery.lazyload.min.js"></script>
<script>
    localStorage.setItem("a",2);
    $(function(){
        /*菜单栏切换*/
        $("#toggleNav").on("click",function(){
            $(".navBar").toggleClass("nav-hide");
            return false; //防止冒泡
        })
        $(document).on("click",function(){
            $(".navBar").addClass("nav-hide");
        })

        //图片懒加载
        $("img.lazy").lazyload({
            placeholder: "__TMPL__Public/images/loading.gif", //用图片提前占位
            effect: "fadeIn"
        });

        //加载更多
        var loading = false;
        $(document.body).infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            setTimeout(function () {
                $.ajax({
                    url: "{:U('news/lst')}",
                    type: 'get',
                    dataType: 'json',
                    data: {p: localStorage.getItem('a')},
                    success:function(data){
                        if(parseInt(localStorage.getItem("a"))>data.total_pages){
                            alert('暂无更多数据!');
                            return false;
                        }
                        for (var i = 0; i < data.posts.length; i++) {
                            var href = "/news/detail/id/"+data.posts[i].pid;
                            var smeta = JSON.parse(data.posts[i].smeta);
                            if(smeta.thumb == ''){
                                smeta.thumb = '__TMPL__Public/images/duooyu.jpg';
                            }else{
                                smeta.thumb = '/data/upload/'+smeta.thumb;
                            }
                            html ='<li>';
                            html +='<a href="'+href+'">';
                            html +='<img src="'+smeta.thumb+'" alt="" width="100%" class="lazy"/>';
                            html +='<div class="title">';
                            html +='    <span>'+data.posts[i].post_title.substring(0,15)+'</span>';
                            html +='    <span>'+data.posts[i].post_date.substring(0,10)+'</span>';
                            html +='</div>';
                            html +='<div class="innerCon">';
                            html +='    <p>'+data.posts[i].post_content.substring(0,150)+'</p>';
                            html +='    <span>查看全文<i class="iconfont icon-youjiantou"></i></span>';
                            html +=' </div>';
                            html +='</a>';
                            html +='</li>';
                            $(".newsList").append(html);
                        }
                        localStorage.setItem("a",parseInt(localStorage.getItem("a")) + 1);
                    }
                })
                // $(".newsList").append('<li><a href="news-detail.html"><img src="__TMPL__Public/images/news-bg.jpg" alt="" width="100%" class="lazy"/><div class="title"><span>跨境电商进出口门槛提高</span><span>2017-03-28</span></div><div class="innerCon"><p>伴随着跨境电商门槛的提高,国内跨境电商商卖缓冲地带商平台将面临整合,地带”商平台将面临整合,地带”商平台将面临整合,地带”商平台将面临整合,出口面向海外的跨境电商卖家也将面临洗牌,新兴市场成为"缓冲地带"商平</p><span>查看全文<i class="iconfont icon-youjiantou"></i></span></div></a></li>');
                loading = false;
            }, 1000);
        });


    })
</script>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注