js and ajax implement scrolling to the bottom to automatically load data instances

1, Function description

Scrolling down to the bottom of the page to load data is the practice of many waterfall websites. This example is fixed data, which is used to summarize and record small dishes. Experts should not spray.

First, you need to determine how the page scrolls to the bottom, that is, whether the height of scrollTop+window is greater than the height of document. jquery is as follows:

$(window).scrollTop()+$(window).height()>=$(document).height();
---------------------------------------------------------------

Then bind the scroll event to the window to display the loading data.

The main purpose of this example is to provide the mobile version, so the rotation simulation image loading effect of CSS3 is used.

In the example, it is realized to automatically determine whether the conditions for rolling events have been met. If the height is not enough to automatically supplement the next page, the rolling events can be executed effectively directly. If all the contents have been loaded, it will prompt: "Duan to the end"

2, Renderings

3, Source code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>jq Scroll to bottom auto load|Xingfan learning network</title>

<style>
        html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}
        body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;font-size:16px;color:#333;}
        ol,ul{list-style:none;}
        a{text-decoration:none;}
        body{background:#f2f2f2;}
        .prolist li{height:50px;line-height:50px;border-bottom:1px solid #f8f8f8;background:#fff;padding:0 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
        .prolist li a{color:#333;font-size:16px;}

        /**Load effect rotation**/
        @-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
        @keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}

        .loadmore {display:block;line-height: 50px;text-align:center;color:#ccc;font-size:14px;}
        .loadmore span{height:20px;width:20px;border-radius:100%;display:inline-block;margin:10px;border:2px solid #f60;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 1.1s infinite linear;animation: rotate 1.1s infinite linear;}
        .loadover{position:relative;margin:0 12px;padding:24px 0;height:20px;line-height:20px;color:#909090;text-align: center;}
        .loadover span{position:relative;display:inline-block;padding:0 6px;height:20px;background:#F2F2F2;z-index:2}
        .loadover:after {content:''position: absolute;left: 0;top:50%;width: 100%;height:1px;background:#DCDCDC;z-index:1;display:block;}
    </style>
</head>
<body>
<!-- Product list start-->
<ul class="prolist">
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">Good classic life sentence, classic is heartbreaking!</b></a></li>
</ul>
<!-- End of product list -->

<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script>
<script>
var page=1;
var finished=0;
var sover=0;

//If the screen does not reach the full screen, the next page will be loaded automatically to fill up
var setdefult=setInterval(function (){
    if(sover==1)
        clearInterval(setdefult);   
    else if($(".prolist").height()<$(window).height())
        loadmore($(window));
    else
        clearInterval(setdefult);
},500);

//Load up
function loadover(){
    if(sover==1)
    {   
        var overtext="Duang~After all";
        $(".loadmore").remove();
        if($(".loadover").length>0)
        {
            $(".loadover span").eq(0).html(overtext);
        }
        else
        {
            var txt='<div class="loadover"><span>'+overtext+'</span></div>'
            $("body").append(txt);
        }
    }
}

//Load more
var vid=0;
function loadmore(obj){
    if(finished==0 && sover==0)
    {
        var scrollTop = $(obj).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(obj).height();

        if($(".loadmore").length==0)
        {
            var txt='<div class="loadmore"><span class="loading"></span>Loading..</div>'
            $("body").append(txt);
        }

        if (scrollTop + windowHeight -scrollHeight<=50 ) {
            //This is the event triggered when the scroll bar reaches the bottom. Write the data to be loaded here, or pull the scroll bar


            //Prevent execution again before loading
            finished=1;

            var result = "";
            for(var i = 0; i < 6; i++){
                vid++;
                result+='<li>'
                            +'<a href="http://Www.86y. Org / art_detail. ASPX? Id = 744 "> good classic life sentence, classic is heartbreaking! '+parseInt(vid)+'</a>'
                        +'</li>'
            }
            setTimeout(function(){
                //$(".loadmore").remove();
                $('.prolist').append(result);
                page+=1;
                finished=0;
                //last page
                if(page==10)
                {
                    sover=1;
                    loadover();
                }
            },1000);
            /*$.ajax({
                type: 'GET',
                url: 'json/more.json?t=25&page='+page,
                dataType: 'json',
                success: function(data){
                    if(data=="")
                    {
                        sover = 1;
                        loadover();                     
                        if (page == 1) {
                            $("#no_msg").removeClass("hidden");
                            $(".loadover").remove();
                        }
                    }
                    else
                    {
                        var result = ''
                        for(var i = 0; i < data.lists.length; i++){
                            result+='<li>'
                                        +'<a href="'+data.lists[i].link+'">'+data.lists[i].title+parseInt(page+1)+"-"+i+'</a>'
                                    +'</li>'
                        }

                        // To test, delay loading for 1 second
                        setTimeout(function(){
                            $(".loadmore").remove();
                            $('.prolist').append(result);
                            page+=1;
                            finished=0;
                            //last page
                            if(page==10)
                            {
                                sover=1;
                                loadover();
                            }
                        },1000);
                    }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                }
            });*/
        }
    }
}
//Page scrolling execution events
$(window).scroll(function (){
    loadmore($(this));
});
</script>
</body>
</html>

DEMO address: http://www.86y.org/demo/jqscroll/ (it is recommended to use the mobile phone for better opening effect)

Reprinted from: http://www.86y.org/art_detail.aspx?id=752 [jq scrolling to the bottom automatically loading data example] Xingfan learning network

Tags: JSON JQuery Mobile network

Posted on Fri, 31 Jan 2020 08:12:01 -0800 by phpfre@k*