Advanced16/lazyloadnews.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>html</title>
    <meta name="referrer" content="never">
    <style>
        ul,li{
            list-style: none;
        }
        html,body,h2,p,ul,li{
            margin: 0;
            padding: 0;
        }
        a{
            color: #333;
            text-decoration: none;
        }

        .container{
            max-width: 600px;
            margin: 0 auto;
        }
        .item{
            margin-top: 20px;
        }
        .item:after{
            content: '';
            display: block;
            clear: both;
        }
        .item .thumb img{
            width: 50px;
            height: 50px;
        }
        .item .thumb {
            float: left;
        }
        .item h2{
            margin-left: 60px;
            font-size: 14px;

        }
        .item p{
            margin-left: 60px;
            font-size: 14px;
            margin-top: 10px;
            color: #ccc;
        }
        .load-more{
            visibility: hidden;
            margin: 3px;
            height: 3px;
        }

    </style>
</head>
<body>
<div class="container">
    <ul class="news">

    </ul>
    <p class="load-more"></p>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var pageIndex = 0;
var isover = false;
var isnew = true;
getinfo();
$(window).on("scroll",checkout);
function checkout() {
    if(isvisible($(".load-more"))&&!isover&&isnew){
        getinfo();
    }
}
function  getinfo() {
    isnew = false;
    $.ajax({
        'method':"get",
        data:{page:pageIndex},
        url:"getNews"
    }).success(function (data) {
        if(data.status ==0){
            isnew = true;
            pageIndex++;
            drawhtml(data.data);
            checkout();
        }else{
            alert("获取新闻出错")
        }
    }).error(function () {
        alert('系统异常')
    })
}
function drawhtml(data) {
    if(data.length==0){
        isover=true;
        return ;
    }else{
        var html = "";
        $.each(data,function (i,item) {
            html+=' <li class="item">' +
                '<a href="'+data[i]["link"]+'">' +
                ' <div class="thumb">' +
                '<img src="'+data[i]["img"]+'">' +
                '</div>' +
                '<h2>'+data[i]["title"]+'</h2>' +
                ' <p>'+data[i]["brif"]+'</p>' +
                '</a>' +
                '</li>'
        });
        $(".news").append(html);
    }
}
function isvisible(ele) {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var eleH = $(ele).height();
    var offsetTop= $(ele).offset().top;
    if(offsetTop+eleH>scrollTop && offsetTop< scrollTop + windowHeight  ){
        return true
    }else{
        return false
    }
}
</script>
</body>
</html>