Scroll to the bottom of the page is automatically loaded content

Original link: http://www.cnblogs.com/jf-67/p/7743088.html

　　Often see a lot of cool web page online, which impressed me a deeper content is automatically loaded when the mouse to scroll to the bottom of the page, it has been very curious to Quebec, so he is trying to write a little .

　　The first complete bar code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        div{
            width:900px;
            height:800px;
        }
        li{
            list-style-type:none ; 
        } 
    </ style > 
</ head > 
< body ID = "Container" > 
    < div > lfjakjflkf </ div > 
    < Script > 
        // Get the current position of the scroll bar 
        function getscrolltop () { 
             var scrollTop =  0 ; 
             IF ( document.documentElement && document.documentElement.scrollTop) { 
                scrollTop = document.documentElement.scrollTop; 
            } 
            the else IF (the document.body) { 
                scrollTop = document.body.scrollTop; 
            } 
            return scrollTop; 
        } 

        // Get the height of the current visual range 
        function getclientheight () { 
             var clientHeight =  0 ; 
             IF (document.body.clientHeight && document.documentElement .clientHeight) { 
                clientHeight = Math.min (document.body.clientHeight, document.documentElement.clientHeight); 
            } the else { 
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
            } 
            return clientheight; 
        } 

        //获取文档完整的高度 
        function getscrollheight() { 
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
        } 
        window.onscroll = function () { 
            if(getscrolltop() + getclientheight() == getscrollheight()) { 
                var xhr;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP")
                };
                xhr.open("get","load.json",true);
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4&& xhr.status==200){
                        var txt =xhr.responseText;
                         var STR =  "" ;
                         // Because json string is obtained, it must now be converted into json object. 
                        .each $ (the JSON.parse (TXT), function (Key, value) { 
                            STR + =  " <Li> " + ' Name: ' + value [ 0 ] .name + ' age:. ' + value [ 0 ] .age + ' gender:. ' + value [ 0 ] .sex + " </ Li>"+"<br/>"+"<br/>";
                            $("body").append(str)    
                        })
                    }
                }
                xhr.send(); 
            }
        } 
    </script>
</body>
</html>

　Code load.json file is as follows:

{"person":[
    {"name":"tom","age":"25","sex":"男"}
]}

　Well, let's analyze under this code, in fact, part of the first page will be loaded, and then slide the scroll bar to the document has been highly visible area of the scroll bar from the top of the document + height equal to asynchronously load a json file documents the total height Content.

　　Here are a few points: 1, to obtain the full height of the document. 2, access to documents viewable area height. 3, the top of the scroll bar to obtain documents from the heights. 4, it is determined whether the scroll bar to the bottom of the page, such as to the bottom of the asynchronous loading json file. 5, needs to be rendered asynchronously loaded json file into a page, is due to get json string, so need to use JSON.parse () method first convert it to json object before you can use $ .each () method traversal, and then get the data one by one.

　　In fact, I am here to get the document height, the height of the visible area and the scroll bar from the top of the height of the document using js wrote, relatively complicated point, if written in jQuery, it would be very simple, such as

　　Get the full height of the document, you can use $ (document) .height ();

　　Obtaining Documentation highly visible area, you can use $ (window) .height ();

　　Get the scroll from the top bar of the height of the document, you can use $ (window) .scrollTop ().

Reproduced in: https: //www.cnblogs.com/jf-67/p/7743088.html

Scroll to the bottom of the page is automatically loaded content

Guess you like