https://github.com/sandi-racy/infiniteScroll

jQuery Infinite Scroll is a simple jQuery lazy loading
https://github.com/sandi-racy/infiniteScroll

Last synced: 18 days ago
JSON representation

jQuery Infinite Scroll is a simple jQuery lazy loading

• Host: GitHub
• URL: https://github.com/sandi-racy/infiniteScroll
• Owner: sandi-racy
• Created: 2013-08-01T12:05:28.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-01-28T04:56:51.000Z (almost 10 years ago)
• Last Synced: 2024-08-01T00:56:22.762Z (3 months ago)
• Language: JavaScript
• Size: 180 KB
• Stars: 1
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jQuery Infinite Scroll



Demo

http://www.21studio.com/infiniteScroll


What's new in version 1.2



    
Now support bower, just type bower install infiniteScroll





What's new in version 1.1



  
Adding event hooks

  
Adding property enable

  
jQuery No Conflict Support



How to use

HTML


  <div id="wrapper">

    <p>Line 1</p>

    <p>Line 2</p>

    <p>Line 3</p>

    <a class="url" data-href="http://yourweb/yourfile.php">

  </div>



Calling jQuery Infinite Scroll


  $('#wrapper').infiniteScroll();



yourfile.php


  if(allDataHaveBeenLoaded()){

    echo 'done';

  }

  else{

    //whatever you want to display

  }



To disable it, just do


  $("#wrapper").infiniteScroll({enable:false});



Available Options


  

    

      Options

      Explanations

      Default

    

  

  

    

      classNextSelector

      Class Selector to fetch next data

      .url:last

      

    

      dataAttributeNextSelector

      Data attribute that containing url to fetch next data

      href

      

     

      enable

      Enabling jQuery Infinite Scroll

      true

      

    

      resultWord

      The word that telling jQuery Infinite Scroll that all data have been loaded

      done

      

    

      loading

      Something you want to display when jQuery Infinite Scroll fetch next data

      <div class="loading" style="text-align:center;">Loading...</div>

      

    

      classLoading

      The class of something you want to display when jQuery Infinite Scroll fetch next data

      loading

     

    

      startAt

      The position of scroll bar to start fetch next data (0 <= startAt <= 1)

      1

         

    

      animation

      The animation of displaying next data (available animation : fade or slide)

      fade

    

    

      animationSpeed

      The speed of your animation, it can be slow, fast, or speed of millisecond

      slow

        

    

      done

      Something you want to display when all data have been loaded

      <div style="text-align:center;">It\'s done.</div>

      

 

Event Hooks


  

    

      Event

      Explanations

    

  

  

    

      onLoad

      Doing something when loading next data

      

    

      success

      Doing something when loading is success

      

     

      onFinish

      Doing something when all data have been loaded