Unlimited repeating data loading scroll using Jquery | 2my4edge

13 November 2015

Unlimited repeating data loading scroll using Jquery

Today i'm going to share you one of the useful jquery for loading unlimited data while scrolling down to the page. im going to use iscroll.js to make this kind of function. most of the site are using this kind of script to make the data lengthy. this make help to stay people in the page. lets see the code for that.

unlimited loading load more data using jquery
DOWNLOAD                                         LIVE DEMO

SCRIPTS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.iscroll.js"></script>
<script>
    $(document).on('ready',function(){
        $('#demo').iscroll();               
        });
</script>

SCRIPT OPTIONS
$('#demo').iscroll({
  Loadingoffset: 20,
  optionsData: {},
  loadingHtml: '<small>Loading...</small>', // null
  sendReqonInit:false,
  autoTrigger: true, //must be true for autoTriggerUntil
  autoTriggerUntil: false,
  next:'a:last',
  onBeginRequest: null,
  ondataArrival: null
});


HTML
<div class="container" id="demo">
<div class="data">
<a href="http://www.2my4edge.com/2015/03/responsive-back-to-top-using-bootstrap.html">
    <img src="images/1.png" align="center">
</a>
</div>

<div class="data">
<a href="http://www.2my4edge.com/2015/03/responsive-back-to-top-using-bootstrap.html">
<img src="images/2.gif" align="center">
</a>
</div>

<div class="data">
<a href="http://www.2my4edge.com/2015/05/problem-in-adding-more-products-to-cart.html">
<img src="images/3.png" align="center">
</a>
</div>

<div class="data">
    <a href="http://www.2my4edge.com/2015/07/usage-of-animatecss-one-of-finest-css.html">
<img src="images/20.png" align="center">
</a>
</div>

<a href="load-data.html" class="_next"> Loading data </a>
</div>

LOAD-DATA.HTML
<div class="data">
<a href="http://www.2my4edge.com/2015/03/responsive-back-to-top-using-bootstrap.html">
    <img src="images/1.png" align="center">
</a>
</div>

<div class="data">
<a href="http://www.2my4edge.com/2015/03/responsive-back-to-top-using-bootstrap.html">
<img src="images/2.gif" align="center">
</a>
</div>

<div class="data">
<a href="http://www.2my4edge.com/2015/05/problem-in-adding-more-products-to-cart.html">
<img src="images/3.png" align="center">
</a>
</div>

<div class="data">
    <a href="http://www.2my4edge.com/2015/07/usage-of-animatecss-one-of-finest-css.html">
<img src="images/20.png" align="center">
</a>
</div>

<a href="load-data.html" class="_next"> Loading data </a>

here we are loading the data from the page of load-data.html. like that in the load-data.html also we are loading the same page inside. this loading will taking by using a tag with class="_next".
You can load dynamic data also here, this will works fine. Try this one. i hope this one is really helpful for you. thanks for visiting. keep in touch for more interesting tutorial like this.





RELATED POSTS :


No comments:

Post a Comment

^