Load Content While Scrolling Page using JQuery
We generally have lots of content to present but can not load all of it at once as it may take too long.
This Ajax auto content loading can very be handy in almost every project.
When we are scrolling down a webpage, the code recognizes that you are at the bottom and auto-loads new content.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
var scrollInAction = false;
$(window).scroll(function(){
console.log($(window).scrollTop() >= ($(document).height() - $(window).height() - 200));
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)){
if (scrollInAction)
{
return false;
}else
{
scrollInAction=true;
//do stuff // load of more content here
yourFunction();
// scrollInAction=false; // TODO: PUT this scrollInAction=false after ajax loading is completed.
}
}
});
var index = 0 ;
function yourFunction(){
// AJAX Data Loading Logic
$("#lisitingDiv").append("<div id='subDiv' name='subDiv'><label>Index " + index + "</label></div>");
$("#lisitingDiv").append("<br/>");
index = index + 1 ;
if(index > 500) // 500 is limit after which auto scrolling will be disabled...
{
scrollInAction=true;
}else
{
scrollInAction=false;
}
}
function onLoad(){
for(i=0;i<25;i++)
{
yourFunction();
}
}
</script>
<style>
label {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFEC;
border-color: #EEEECC;
border-image: none;
border-style: solid;
border-width: 0 1px;
color: #000000;
font-size: 100%;
margin: 0;
padding: 0.25em 27px;
display: block;
text-decoration: none;
}
#subDiv{
margin: 3px auto;
position: relative;
width: 720px;
}
</style>
</head>
<body onload="onLoad()">
<p style="position: fixed;">
Scroll Down.....
<br>
It will scroll till Index 500.
</p>
<div id="lisitingDiv" name="lisitingDiv">
</div>
</body>
</html>
It helps increasing the initial load speeds of pages faster and users will have to load only the content they see.
not working
ReplyDeleteYou can view this behavior in the facebook and twitter websites. Login to your facebook or twitter account and press End key on your keyboard. You will be able to view the loader as shown in the image.
ReplyDeletehttps://plus.google.com/108400481090161300810/posts/gR5VgZiDudr
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteOur software is not really advisable to use if you want to create quality content for your site; if you cannot afford to use a service offered by companies or freelancers who write quality content, you can still try and start to write articles on your own. spin rewriter review
ReplyDeleteThanks for sharing this post. Visit also this source to learn more about apps to spy on facebook.
ReplyDeleteIt's awesome designed for me to have a web page, which is helpful designed for my know-how. thanks admin paypal login
ReplyDeleteIf you're purchasing or refinancing your home, I will. canada mortgage calculator Select the China site (in Chinese or English) for optimum site performance. mortgage calculator canada
ReplyDelete