Jquery browser scroll loading technology implementation scheme

  • 2020-03-30 03:12:00
  • OfStack

You know, it doesn't seem to make sense to locate the page number to find the target data when the amount of data increases frequently. I think a mature WEB application should guide users to use features like TAG or search to find the target data. As for browsing data, especially the latest data, using browser scrollbars to load it is a good attempt...

I tried to do this with jquery. You first get the length property value of the scroll bar: scrollHeight, and the current position property value of the scroll bar: scrollTop. Then, by calculation, if the current value is two thirds of the total value, the new data is loaded. Suppose you have an element on the DOM called < Div id = "mypage" > < / div> , the overflow style of the element is scroll, which means that the scrollbar is enabled when the height of the content overflow element in the element is specified. Using jquery's load method to load an existing file for the element, I assume it is table.html. The contents of this file can be a table large enough to scroll the browser.


<script type= " text/javascript "  src= " jquery.js " >//Load the jquery library </ script>
<script type= " text/javascript " > gh
var hght=0;//Initializes the scroll bar length
var top=0;//Initializes the current position of the scroll bar
$(document).ready(function(){//The DOM's onload event
$( " #mypage " ).load( " table.html " );//The contents of table.html are loaded into the mypage element
$( " #mypage " ).scroll( function() {//Defines the event that fires when the scrollbar position changes.
hght=this.scrollHeight;//Get the length of the scroll bar and assign it to the HGHT variable
top=this.scrollTop;//Get the current value of the scroll bar and assign it to the top variable
});
});
setInterval( " cando(); " ,2000);//The cando function is called every 2 seconds to determine the current scroll bar position.
function cando(){
if(top>parseInt(hght/3)*2)//To determine whether the current position of the scroll bar exceeds 2/3 of the total length, parseInt is the integer function
show();//If so, call the show function to load the content.
}
function show(){
$.get( " table.html " , function(data){//Use jquery's get method to get the content of table.html
$( " #mypage " ).append(data);//Append the content to the mypage element with the append method.
hght=0;//Restore the total length of the scrollbar, because $(" #mypage "). Once the scroll event is triggered, it will get a new value again. If it is not restored, it may cause a judgment error and reload.
top=0;//The reason is the same as above.
});
}
</script>
<div id= " mypage " ></div>

Why call a judgment every 2 seconds? Because as long as the $(" #mypage ").scroll event is triggered, it will shadow the HGHT and top values, which may always satisfy the judgment of cando function, that is, the top value is always located at two-thirds of the HGHT. Therefore, multiple loads may result in an increased server load. This is also why we assign HGHT and top to 0 after each load.

The effect of this code is to append the contents of table.html to the element mypage as long as the element mypage's scroll bar is located at two thirds of the length of the scroll bar. Of course, this runs like this with an endless load. In real AJAX usage, table.html can be replaced by an asp or PHP script that takes a get or post parameter to process, and then returns meaningful data. Jquery's get method can set the parameter data of get, such as:


$.get( " test.php " , { name:  " boho " , id:  " 1 "  } );

The equivalent of http://localhost/test.php? Name =boho&id=1 this form of HTTP access. Then get the contents of the test.php output through the callback function of the get method:


$.get( " test.php " , {name: " boho " ,id: " 1 " },function(data){
alert( " Data Loaded:  "  + data);
});


Related articles: