<!DOCTYPE HTML><HTML><Head> <title>Infinite page Turn test</title> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Scriptsrc= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></Script> <styletype= "Text/css">#spinner{position:fixed;Top:20px; Left:40%;Display:Block;Color:Red;Font-weight: the;Background-color:Rgba (0.22);Padding-top:20px;Padding-bottom:20px;Padding-left:100px;Padding-right:100px;Border-radius:15px; } </style></Head><Body> <DivID= "Sample"> </Div> <DivID= "Spinner">is loading</Div> <Scripttype= "Text/javascript"> varIndex= 0; functionLowenough () {varPageHeight=Math.max (document.body.scrollheight,document.body.offsetheight); varViewportheight=Window.innerheight||Document.documentElement.clientHeight||Document.body.clientHeight|| 0; varscrollheight=Window.pageyoffset||Document.documentElement.scrollTop||Document.body.scrollTop|| 0; //Console.log (document.body.scrollHeight); //Console.log (document.body.offsetHeight); //Console.log (pageheight); //Console.log (viewportheight); //Console.log (scrollheight); returnPageHeight-Viewportheight-scrollheight< -; } functiondosomething () {varHtmlstr= ""; for(varI=0; I<Ten; I++) {Htmlstr+= "This is the first"+Index+"Secondary Load <br>"; } $('#sample'). Append (HTMLSTR); Index++; Pollscroll ();//Continue looping $('#spinner'). Hide (); } functionCheckscroll () {if(!Lowenough ())returnPollscroll (); $('#spinner'). Show (); SetTimeout (DoSomething, the); } functionPollscroll () {setTimeout (Checkscroll, +); } checkscroll (); </Script></Body></HTML>
html-Scroll to the bottom to automatically load