Skip to content

Instantly share code, notes, and snippets.

@manikandanselva

manikandanselva/Scroll Load Javascript

Created March 13, 2018 05:53
Show Gist options
  • Save manikandanselva/59f895518cf6998f3aca6ae787438e6a to your computer and use it in GitHub Desktop.
Save manikandanselva/59f895518cf6998f3aca6ae787438e6a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Scroll Load Javascript
<!DOCTYPE html>
<html>
<head>
<title>Demo: Lazy Loader</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#myScroll {
border: 1px solid #999;
}
p {
border: 1px solid #ccc;
padding: 50px;
text-align: center;
}
.loading {
color: red;
}
.dynamic {
background-color:#ccc;
color:#000;
}
</style>
<script>
var counter=0;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 100) {
//console.log(counter);
//console.log($(window).scrollTop());
appendData();
}
});
function appendData() {
var html = '';
html = '<p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p><p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p>';
$('#myScroll').append(html);
counter+=10;
console.log('SELECT * FROM books LIMIT '+ counter +', 10');
}
</script>
</head>
<body>
<div id="myScroll">
<p>
Contents will load here!!!.<br />
</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment