Use jquery to implement scrolling browser scroll bar loading data in asp.net website development (similar to Tencent Weibo)_jquery

I have basically been using Tencent Weibo since it was launched. Until now, as a developer, I have also seen that Tencent Weibo has been constantly changing. I don’t know if you have noticed that Tencent Weibo provides two There are two ways to load data: one is paging, and the other is scrolling the browser scroll bar to load data. I think everyone has done too much of the paging function. Today I will share with you how I use the scroll bar to load data
below Start the lecture:
Let me talk about the idea first. I use Jquery, and then use Jquery’s ajax() method to load remote data through HTTP requests. When using Jquery, you must first apply the jquery.min.js class library. If If it is not available locally, you can also directly quote the following address.
Okay, let’s take a look at the core code:

Copy the code The code is as follows:

// - -!, you know.
var count=<%=allcount %>;
var times=0;
var loaded = true;
function Add_Data()
{
var top = $("#main_left_add").offset().top;
if(loaded && ($(window).scrollTop() $(window).height() > top ))
{
$("#main_left_add").html("Data loading...");
times ;
$.ajax(
{
type: "POST",
dataType: "text",
url: "weibo.ashx",
data: "userid=" <%=hf.Value %> "&touserid=" <% =hf1.Value %> "&count=" count "×=" times "&type=1",
success: function(data)
{
//alert("Append " times " times Data.");
if(data == "No data")
{
$("#main_left_add").css("display","none");
loaded=false ;
AddEffect();
}
else if(data == "")
{
$("#main_left_add").html("Click to load more..." );
$("#main_left_add").css("display","block");
loaded=false;
AddEffect();
}
else if(data ! = "")
{
$("#main_left_down").append(data);
AddEffect();
}
}
}
);
}
}
$(window).scroll(Add_Data);
//Click to add data
$("#main_left_add").click(function(){
$.ajax ({
type: "POST",
dataType: "text",
url: "weibo.ashx",
data:"userid=" <%=hf.Value %> "&touserid=" <%=hf1.Value %> "&count=" count "×=" times "&type=2",
success: function(data){
if(data=="No data")
{
$("#main_left_add").css("display","none");
AddEffect();
}
else
{
$("#main_left_down").append(data);
$("#main_left_add").html("Click to load more...");
AddEffect();
}
}
});
//Mouse movement effect
$("#main_left_add").mouseover(function(){
$(this).css("background-color", "#e4eef8");
});
$("#main_left_add").mouseout(function(){
$(this).css("background-color","#f0f5f8") ;
});

This is the front-end js code. Let me explain the code a little bit: count is the total number of data defined. Two divs are defined. One div is used to append data. A div is used to determine the position of the scroll bar, and a *.ashx file is created to process the program and return the corresponding data. Based on this data, we must determine the loading situation. After the scroll append is completed, I also added an additional "Click to load more" Function...", the implementation of this function is similar to the above...the codes are all above for your reference.
Note: In order to prevent the scroll event from being executed all the time, a loaded is defined to control the execution of the scroll event.