5 jQuery Infinite Scrolling Demos

Sam Deering

Here are 5 demos which you could use as the barebones for your next infinite scrolling project. I’ve been playing around with infinite scrolling for one of my projects and I’ve tried a few jQuery plugins which can manage the “endless scroll” showing items, posts, rss feeds, tweets or anything really. The content can be generated dynamically from JavaScript but most commonly loaded from a server script using AJAX. Also I found that Firefox 8 only detects the scroll upto 99.85% of the screen which was strange.

Update 14/10/13: Full code for all 5 demos added to GitHub.

Infinite Scrolling Demo 1

This demo uses the jQuery Masonry plugin together with the Infinite Scroll plugin. The Masonry plugin really is good for obtaining fluid layouts definately recommend it for that. The infinite scroll plugin by Paul Irish is good at loading pages which already exist such as page.html, page2.html, page3.html but it can’t handle dynamic generated content such as hitting the same page.php file with appended parameters page.php?data=xxx. Just bear that in mind if you go with this option.

infinitescroll1

Usage – HTML

<div id="container">
  <div class="box">
    <p>content</p>
  </div>
  ...
</div>

<!-- contains the content to be loaded when scrolled -->
<nav id="page-nav">
  <a href="pages/2.html"></a>
</nav>

Usage – jQuery

<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
  $(function(){

    var $container = $('#container');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box',
        columnWidth: 100
      });
    });

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true );
        });
      }
    );
  });
</script>

Infinite Scrolling Demo 2

Basic infinite scrolling script which can load data in using AJAX and displays a nice little loading image at the bottom (twitter style). The demo never reaches the end of content but if you included either a) logic in your backend script to return nothing when content finishes or; b) a loop for loading to reach the end, then you could achieve this quite easily.

infinitescroll2

Usage – HTML

<div id="postswrapper">
   <div class="item">content</div>
   ...
   <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div>
</div>

Usage – jQuery

<script type="text/javascript">
$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loadmore.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }
});
</script>

Infinite Scrolling Demo 3

This demo loads in images on infinite scroll and never reaches the end. It uses the jquery.endless-scroll plugin which can be customised to trigger load for x number of pixels from the bottom of the screen. The demo clones the same images and inserts them at the end of the list and so on. Obviously the script can be customised to load more images from different sources quite easily.

infinitescroll3

Usage – HTML

  <ul id="images">
    <li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
    <li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
    <li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
    <li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
    <li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
    <li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
    <li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
  </ul>

Usage – jQuery

  <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(function() {
      $(document).endlessScroll({
        bottomPixels: 500,
        fireDelay: 10,
        callback: function(i) {
          var last_img = $("ul#images li:last");
          last_img.after(last_img.prev().prev().prev().prev().prev().prev().clone());
        }
      });
    });
  </script>

Infinite Scrolling Demo 4

This demo uses the same plugin as demo 3 but we have applied the infinite scroll to a list with it’s own vertical scrollbar. As you scroll down the numbers are simply appended as list items.

infinitescroll4

Usage – HTML

  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
  </ul>

Usage – jQuery

  <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(function() {
      $('ul#list').endlessScroll({
        fireOnce: false,
        insertAfter: "ul#list div:last",
        data: function(i) {
          return '<li>' + i + '</li>'
        }
      });
    });
  </script>

Infinite Scrolling Demo 5

This demo uses some JavaScript to detect the scrolling and trigger a function which shows the loading image and loads in more content using AJAX.

infinitescroll5

Usage – HTML

<ul class="items">
   <li>content</li>
   <li>content</li>
   ...
</ul>
<div id="lastPostsLoader"></div>

Usage – jQuery

<script type="text/javascript">
$(document).ready(function(){
    function lastAddedLiveFunc()
    {
        $('div#lastPostsLoader').html('<img src="bigLoader.gif"/>');

        $.get("loadmore.php", function(data){
            if (data != "") {
                //console.log('add data..');
                $(".items").append(data);
            }
            $('div#lastPostsLoader').empty();
        });
    };

    //lastAddedLiveFunc();
    $(window).scroll(function(){

        var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
        var  scrolltrigger = 0.95;

        if  ((wintop/(docheight-winheight)) > scrolltrigger) {
         //console.log('scroll bottom');
         lastAddedLiveFunc();
        }
    });
});
</script>

6. Sly Inifinte Scroll.
Also Sly has a pretty cool infinite scrolling technique.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://tutsmais.com.br/blog/ Ofelquis

    Great.. =D

    • http://jquery4u.com/ jQuery4u

      Thanks!

      • http://dentaldev.tk/index.php/ Noman

        Thanks for sharing such a nice info

  • http://www.gbin1.com terry

    It’s kind of cool stuff!

  • Pingback: Tweet-Parade (no.48 Nov-Dec 2011) | gonzoblog.nl

  • avner

    great!
    has anyone already integrated this plugin with Wicket using WiQuery?

    • http://dentaldev.tk/index.php/ Noman

      I am looking foe new developer virtually if any one willing to work then contact me

  • coffeeyesplease

    Fantastic stuff.
    Thanks a million

    • http://jquery4u.com/ jQuery4u

      No worries! :)

  • Eliza

    Hi
    I am using it for images and have used fancy box to open the images and a box but the infinite scroll doesn’t work. The loading box comes up but the page doesn’t appear… this isn’t working on IE9 windows 7… PLEASE HELP!!!

    • http://jquery4u.com/ jQuery4u

      Hi Eliza,

      Sounds like a typical IE bug, does it work in any other versions of IE?

      Could you post a URL so I could take a look for you?

      Thanks,
      Sam

      • Eliza

        Hi Sam,

        Thank you the URL is http://www.optsydney.com.au/testinghub/gallery.php

        The issue I’m having is that once you reload the page you can no longer scroll down and see all the pages come up and the fancy box grabs whatever image it likes when you click on an image….

        Really appreciate any help you can give me :)

        Thanks,
        Eliza

        • Eliza
          • http://jquery4u.com/ jQuery4u

            Thanks Eliza, very nice site! Can’t see any bug, It’s working great in Chrome Canary but yes I do see the bug in IE9 / both on Win7.

          • Eliza

            Thank you :) Do you know what I could do to fix it?

          • http://jquery4u.com/ jQuery4u

            This is a tough one, IE bugs usually are unpredictable. It looks like this function could be your culprit. 

            $newElems.animate({ opacity: 1 }); 

            Try added a new css class with opacity covered for different browsers including IE then set the class instead of using animate, this should fix it. Animate doing the same as fadeIn with opacity 1.

            $newElems.addClass(‘show’).fadeIn(); 

            /* css class to show all images */.show {/* Required for IE 5, 6, 7 *//* …or something to trigger hasLayout, like zoom: 1; */width: 100%; /* Theoretically for IE 8 & 9 (more valid) *//* …but not required as filter works too *//* should come BEFORE filter */-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;/* This works in IE 8 & 9 too *//* … but also 5, 6, 7 */filter: alpha(opacity=100);/* Older than Firefox 1.0 */-moz-opacity:1.0;/* Safari 1.x (pre WebKit!) */-khtml-opacity: 1.0;/* Modern!/* Firefox 0.9+, Safari 2?, Chrome any?/* Opera 9+, IE 9+ */opacity: 1.0;}
            full code snippet in <div id="contentGallery"  …——————————————————————-  $(window).load(function(){    var $container = $('#container');    $container.imagesLoaded(function(){      $container.masonry({        itemSelector: '.box',        columnWidth: 1      });    });    $container.infinitescroll({ debug           : false,      navSelector  : '#page-nav',    // selector for the paged navigation      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)      itemSelector : '.box',     // selector for all items you'll retrieve      loading: {          finishedMsg: 'No more pages to load.',          img: 'http://i.imgur.com/6RMhx.gif'        }      },      // trigger Masonry as a callback      function( newElements ) {        // hide new items while they are loading        var $newElems = $( newElements ).css({ opacity: 0 });        // ensure that images load before adding to masonry layout        $newElems.imagesLoaded(function(){          // show elems now they're ready          $newElems.animate({ opacity: 1 });          $container.masonry( 'appended', $newElems, true );        });      }    );  });

            Press F12 in IE to open up developer tools to inspect.Thanks,
            Sam

          • http://jquery4u.com/ jQuery4u

            Hi Eliza,

            Code is slightly messy here, try this fiddle: http://jsfiddle.net/ay77t/Thanks,
            Sam

          • http://jquery4u.com/ jQuery4u

            How’d you go Eliza? Did it fix it?
            Sam

          • http://dentaldev.tk/index.php/ Noman

            Eliza Wana virtual Job?>
            Contact me

  • Pingback: 10 Lightest of the Lightweight jQuery Plugins | jQuery4u

  • Pingback: Implemenitng Infinite Scrolling with jquery - feed99

  • Pingback: Implemenitng Infinite Scrolling with jquery

  • Pingback: 10 Cool Infinite Scrolling Effects That Can Enhance Your Website's Navigation | Design Superstars

  • Pingback: Grids, Paging and Infinite Scrolling « devioblog

  • Gus

    Thank you! Very helpfull! I have this problem of many scroll events calling the function almost simultaneously… any suggestion on how to order this? I need only one trigger at a time… Thank You!

    • james

      I have the same issue, Jquery fires multiple times loading the same content. I have used a session to try to prevent this however the jquery is firing simultaneously so my session is having any effect. I tried using a timmer to prevent any actions happening simultaneously but all it does is que the events and load them after 500 miliseconds. This seems to be pretty useless to me. And the fact you havent answered the question about this problem suggests you have no solution! that makes this whole page a complete waiste of time. If your reading this move ontop a different tutorial as this one is a waste of your time!

      • http://jquery4u.com/ jQuery4u

        Sorry for late reply was busy working on the new site, My solution in the past has been to simply declare a variable, say loadingInProgress = false, then set this to true before you call for new items then in the callback you can set it back to false. This works as a quick solution but there probably a better way. Let me know how you go. Also, patience is a virtue the solution will come.
        Sam

        • marcjuchli

          @41ba00bff9f2549810c05aeee3ca8beb:disqus @801a266749dae16ca0e4e9d394840769:disqus did you find a solution here?
          @jquery4u:disqus unfortunately the trick with the true/false didn’t work for me as firefox will call all the upcoming events at once instead of waiting until .append() is completed. Any idea here?

  • http://www.facebook.com/suavekhmer Sasha Merkushev

    Great script (1). The only problem it doesn’t work with Lytebox – on second and subsequent pages… What a shame…

    • http://dentaldev.tk/index.php/ Noman

      i also face this problem

  • http://nizamilputra.com/ Rizqi Nizamil Putra

    How can I add “a loop for loading to reach the end” on “Infinite Scrolling Demo 2″, so I can limit the post. Could you give me a sample script?

    • TotalniPortali

      Yes, I want to know that too! Help anyone, please…

  • TotalniPortali

    How can I add “a loop for loading to reach the end” on “Infinite
    Scrolling Demo 2″, so I can limit the post. Could somebody please give me a sample
    script?

  • Shantanu

    HI,

    I am using demo1 . It is working properly for me. I have an issue in it is, can we minimize space between images? I do not want space in images.

    How to do this?

    • http://dentaldev.tk/index.php/ Noman

      You Should Use Angular JS , it will resolve your issue

  • Paul

    The 1st one for me doesn’t work for div location. I’ve been trying to implement “localMode” for this plugin for all day but I couldn’t do that. Wierd behavior of this solution persuaded me to not use it in my project.

  • Pingback: 16 jQuery Infinite Scroll Plugin

  • Rana

    Hi, I like the 5th demo & I want to use, but I don’t know where can I find the source code ?

    • http://dentaldev.tk/index.php/ Noman

      Oye Rana
      You are BC

    • Geo

      If you’ve found a soluton for this, could you please let me know?

  • Pingback: Tuned | Add Infinite Scroll to your WordPress Theme in 3 Steps

  • http://www.facebook.com/profile.php?id=100001088220424 Max Stranger

    thanks :D

  • Pingback: 5 JQuery Infinite Scrolling Demos » My Virtual Word

  • jithin

    wow.splendid

  • sweta

    i had been trying that number 1 but it seems not working… can u email me that demo file so that i can check?

    • http://dentaldev.tk/index.php/ Noman

      Sweeta actually your framework not suport this function

  • Sahra

    Hi, I used pagening to display my product records .Now I ‘d like to
    use demo1 as endless scrolling to list them.How should I use demo 1
    ?Please help me to change my pagening way to infinite scrolling.thanks

  • Pingback: Top 10 jQuery scrolling plugins

  • mob4eg

    $(function() {
    //More Button
    $(‘.more’).live(“mouseover mouseout”,function domore()
    {
    var ID = $(this).attr(“id”);
    if(ID)
    {
    $(“#more”+ID).html(”);

    $.ajax({
    type: “POST”,
    url: “newproducts.php?brand= “,
    data: “lastmsg=”+ ID,
    cache: false,
    success: function(html){
    $(“#center_content”).append(html);
    $(“#more”+ID).remove();
    }
    });
    }
    else
    {
    $(“.morebox”).html(‘ ↑ العودة
    إلي الأعلي ↑
    ‘);
    }
    return false;
    }); });

    how do infinite scroll or when scroll show . please with this code

  • Ashly

    Hi sam, I like the 5th demo & I want to use it. Can u provide me some help related that.

  • kkalbat

    I’m trying to implement demo2 in WordPress, no luck though. I’m assuming you are not using any plugins for demo 2, right? Just the files on Github

  • Pingback: Websiteniz için Seçilmiş 5 JQuery Infinite Scroll Uygulaması - Metinbelgesi.Net

  • Pingback: Class | jessInteractive

  • http://dentaldev.tk/index.php/ Noman

    My Magneto Site id build in Masonry Library , i want to add , AJAX page loader function in page but it fails. Same like Facebook posts loads when we scroll down

  • https://www.behance.net/dannyfelipe Danny Felipe

    Hello Sam, how are you?

    I would like a little help, in example number 2, how could I make him not be infinite? For the if he falls to the second condition and show “No more posts to show.”

    thank you

  • http://www.webmastersun.com/ Webmaster Sun

    Not bad, I will try to apply for my blog.

  • Kew Mei

    Hey~ GREAT STUFF!!!
    I would like to use the infinite scrolling in DEMO 1 in my opencart?….is it possible??…can help??…