jquery method for loading data by scrolling

2020-05-12 02:09:39
OfStack

The example in this article describes how jquery scrollloads data. Share with you for your reference. The specific analysis is as follows:

When we browse some web pages, when we pull the browser's scroll bar to the bottom of the page, the page will continue to automatically load more content for the user to browse. I'm going to call it the scroll loading technique, and we've found that a lot of websites use this technique, like sina weibo, QQ Spaces, and so on.

The code is as follows:

<!DOCTYPE=html>

<html>

<head>

<script src="js/jquery.js" type="text/javascript"></script>

   <script type="text/javascript">

    $(document).ready(function(){

        var range = 50;             // Distance from the lower boundary / unit px

        var elemt = 500;           // Insert element height / unit px

        var maxnum = 20;            // Sets the maximum number of loads 

        var num = 1;

        var totalheight = 0; 

        var main = $("#content");                     // The main elements 

        $(window).scroll(function(){

            var srollPos = $(window).scrollTop();    // The distance from the top of the scroll bar ( The page exceeds the height of the window )

            //console.log(" Scroll bar to vertical height at top : "+$(document).scrollTop());

            //console.log(" The document height of the page   : "+$(document).height());

            //console.log(' Browser height: '+$(window).height());

            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

            if(($(document).height()-range) <= totalheight  && num != maxnum) {

                main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");

                num++;

            }

        });

    });

    </script>

</head>

<body>

    <div id="content" style="height:960px">

        <div id="follow">this is a scroll test;<br/>     Page drop-down automatically loads the content </div>

        <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>

    </div>

</body>

</html>

I hope this article has helped you with your jQuery programming.