Loading content at the bottom of the page by offset

This paper is a small demo to load new data at the bottom of the web page.
The effect is as follows:

demo address: demo

1. How to judge whether the web page slides to the bottom?

As shown in the figure, the black area is the real length of the web page, and the red area is the visible area of the user (that is, the trend displayed by the browser). So we can see that when scrollTop+windowHeight=srollHeight, users browse to the bottom of the page.

Author: track

We just need to request new data when the user browses to the bottom. However, it is not to directly request new data, but to add data that has not been read on the basis of the read data. This paper uses the offset to achieve.

2. Specific implementation

The front end records and sends the offset to the back end, and the back end queries and returns the data according to the offset.

Because it is a small demo, for personal convenience and display convenience, everything that can be written together has been written together.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.js">
        </script>
        <script type="text/javascript">
            var offset = 0;//Offset
            var nodata = false; //Determine whether there is still readable data
            var key = true ; //The key specially set for wechat, otherwise the data will be repeated or disordered under wechat browser
            $(document).ready(function() {
                $(window).scroll(function() {  
                    var scrollTop = $(this).scrollTop();  
                    var scrollHeight = $(document).height();  
                    var windowHeight = $(this).height();  
                    //Get data if scrolling to the bottom
                    if(scrollTop + windowHeight >= scrollHeight && nodata==false && key==true) {
                        key = false;
                        $("#dialog").show();//Prompt loading
                        var url = "load.do";
                        var data = {
                            offset: offset + ''
                        };   
                        $.post(url, data, function(data, status) {
                            if(data.arg0=="No data available"){
                                $("#ul").html($("#ul").html()+"<li>"+ data.arg0+"</li>");
                                nodata = true;
                            }else{
                                if(data.arg0!=null)
                                    $("#ul").html($("#ul").html()+"<li>"+ data.arg0+"</li>");
                                if(data.arg1!=null)
                                    $("#ul").html($("#ul").html()+"<li>"+ data.arg1+"</li>");
                                if(data.arg2!=null)
                                    $("#ul").html($("#ul").html()+"<li>"+ data.arg2+"</li>");
                                if(data.arg3!=null)
                                    $("#ul").html($("#ul").html()+"<li>"+ data.arg3+"</li>");
                                if(data.arg4!=null)
                                    $("#ul").html($("#ul").html()+"<li>"+ data.arg4+"</li>");
                                offset = offset + 5;

                            }
                            $("#dialog").hide();
                            key = true;
                        });
                    }

                });

            });
        </script>
        <style type="text/css">
            li {
            height:50px;
            width:100%;
            display:block;
            border:1px solid gray
            }
            ul{
            margin:0 auto;
            padding:0;
            }
            .dialog{
                position: fixed;
                bottom: 30px;
                display: block;
                width: 30%;
                left: 35%;
                border-radius: 5px;
                height: 40px;
                line-height: 40px;
                background-color: #808080;
                text-align: center;
                color: white;
                opacity: 0.7;
            }
        </style>
    </head>

    <body >
        <div class="" style="width: 100%;height:800px;" id="div">
            <ul id="ul">
                <li>hello world!</li>
            </ul>
        </div>
        <span class="dialog" id="dialog" hidden="true">
            //Loading
        </span>
    </body>

</html>
@Controller
public class MyController {

    @RequestMapping(value="/load")
    public @ResponseBody Data loadNext(@RequestParam(value="offset",required=false) int offset){
        ListData listData = new ListData();
        listData.initData();//Initialization data
        Data data = listData.getDataByOffset(offset);//Get data by offset
        //Determine whether there is still readable data
        if(data==null) {
            return new Data("No data available","","","","");
        }
        return data;
    }

}
/**
 * Pseudo database
 * @author sam
 *
 */
public class ListData {

    //Data set
    private List<String> data = new ArrayList<String>();

    /*
     * Initialize (fake) data, assuming it is queried from the database.
     */
    public void initData() {
        for (int i = 0; i < 152; i++) {
            data.add("This is the first"+i+"Data");
        }
    }

    /*
     * Read data from offset
     * 
     * This step can be directly completed through database limit offset and other operations!
     */
    public Data getDataByOffset(int offset) {
        //Prevention of cross-border
        if(data.size() - offset >= 5) {
            //There are > = 5 pieces of data readable
            String arg0 = data.get(offset);
            String arg1 = data.get(offset+1);
            String arg2 = data.get(offset+2);
            String arg3 = data.get(offset+3);
            String arg4 = data.get(offset+4);
            return new Data(arg0,arg1,arg2,arg3,arg4);
        }else if(offset < data.size() ){
            //1-4 pieces of data are readable
            int readable = data.size() - offset; //Number of readable entries remaining
            Data datas = new Data();
            switch (readable) {
            case 4: String arg3 = data.get(offset+3);
                    datas.setArg3(arg3);
            case 3: String arg2 = data.get(offset+2);
                    datas.setArg2(arg2);
            case 2: String arg1 = data.get(offset+1);
                    datas.setArg1(arg1);
            case 1: String arg0 = data.get(offset);
                    datas.setArg0(arg0);
                break;
            default:
                break;
            }
            return datas;
        }
        else {
            //No data readability
            return null;
        }
    }
}
/**
 * DTO
 * @author xswift.trajectory
 *
 */
public class Data {

    private String arg0;
    private String arg1;
    private String arg2;
    private String arg3;
    private String arg4;

    //Omit getter s, setter s, and constructors
}

3. Problems encountered

In the case of normal chrome and uc of mobile phone, there will be repeated loading and missing loading when using wechat browser, so adding a key when sending ajax is similar to the access of critical area.

Tags: Database Javascript JQuery Mobile

Posted on Sun, 03 May 2020 03:16:41 -0400 by Pinkerbot