Implementing Infinite Scrolling with jquery

Question

I am working on a project that uses the jQuery Masonry and Infinite Scroll plugins to load "n" amount of pictures from instagram using their API. Looking at this short example my understanding is that I need to have before hand the html pages to be rendered:

<nav id="page-nav">
  <a href="pages/2.html"></a>
</nav>

The problem is, I dont really know how many pictures will be retrieved. Here is for example how I retrieve 20 pics at a time.

    $(document).ready(function(){       
        var access_token = location.hash.split('=')[1];

        if (location.hash) {

              $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
            success: function(data) {

                for (var i = 0; i < 20; i++) {
            $("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");   
                }     

            }
        });


        } else {
        location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI"; 

        }

    });

I guess I will need a pagination mechanism but based on the tutorial mentioned above I believe I will first need to pre-define the html pages to be loaded. So now here my questions

1. Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling?
2. Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?
3. How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?

With kind regards

Shyamal

Answer 1

1) Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files

Absolutely not. You do not need to generate static html pages beforehand, The only think you need is a URL scheme where subsequent page content can be fetched by changing one number in URL.

Think of it from the perspective of the infinite scroll plugin. You load the plugin JavaScript in your page #1 and provide link to page#2 inside page #1. Now when the user scrolls past page#1, the only variable that the plugin has is the current page number, like, 2, or 3 or 4 (N)

The plugin needs to create the URL to fetch content from when user is scrolling. So how does the plugin do that? The plugin looks at the next URL structure provided in page#1, parses it and creates a "base path" to which it will keep adding current_page_number to fetch subsequent content. That is the role of NAV selector.

So let's say I have something like /home/page/2 as next URL in page#1. The plugin will parse this into an array as

[/home/page/,2]

and think that base_path = "/home/page/"

when the plugin attempts to fetch page_number 3, it will just append 3 to the base path, like base_path.join(current_page_num) making it /home/page/3

On server side I can just have a controller that takes care of all the /home/page/1 to /home/page/N links. You can just look inside the plugin, look for _determinePath and retrieve functions.

Now you can see the problem as well. The problem is that there can be an infinite variety of URL structure depending on how you are doing pagination inside your code and how many variables do you need. My way of doing pagination is different from your way of doing pagination. Same holds for frameworks. Drupal pagination scheme may be different from Djanga and wordpress etc.

The plugin cannot possibly cope with all these URL structures. Given a next URL, it cannot possible always deduce the "base path" to which it needs to add current_page_number. Again look at _determinePath() method of plugin to see what kind of URL it can cope with. It can parse simple URL structures, like page2.html or page=2 but you have to provide your own implementation if your URL structure is complicated or something that the plugin cannot handle. Look at pathParse() method as well.

2)Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have.

Again, there is no need to create HTML files. You have two options to signal end of content (without knowing how many pictures you have in advance)

• When you have reached the "no content condition" you can return an HTTP 404.
• Or you can return an empty string.

Does this answer the question?

How it can work with the plugin

• First page - include - NAV SELECTOR - LOAD THNIGS THE USUAL WAY
• First page on load - use instagram pagination and store "nextURL" in your javascript somewhere
• On Scroll - override _determinePath to provide your own fetch URL using (2) - let plugin retrieve that URL
• Override plugin content selector - so it returns new elements to callback
• On Plugin fetch content - Use the callback inside plugin to update your page

Update on github repo

I have forked paul's github repo to add documentation for PHP server side integration. I believe that plugin's assumption that next URL is only dependent on current page number is too restrictive. We need to get nextURL from next page content.

Github Repo - https://github.com/rjha/infinite-scroll

Pull request on base repo - https://github.com/paulirish/infinite-scroll/pull/219

My javascript knowledge is very limited and maybe you can do a better job of extending the base plugin. However every drop helps make the ocean :)

Tetralogy

@Tetralogy this makes more sense to me now.. however I still have some doubts how to implement that. Would you be so kind to provide a short code example of how to acomplish the load of new pics? – Shyamal

it should be doable if you are willing to override path parsing + content selector + provide content callback. I do not think you would be using anything apart from "scrolling" portion from this plugin. I have updated my answer to include a "schematics" however it does not look worth it. As a quick solution, You are better off copying "fire on scrolling portion" from plugin and provide the rest yourself. Here I chew my own words (never write in haste) and would like to say that @Bergi was right about "your use case and this plugin" – Tetralogy

@Tetralogy beutiful explanation – Barkeeper

Answer 2

Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling?

Yes, that particular plugin seems to be designed to support only static pages, which otherwise would use a "Next page" link. The tutorial you found even states that it could not handle dynamically generated content with URL-parameters, though I don't really believe that.

Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?

By design of that plugin I'd say No. Of course, you should be able to use an (unknown) amount of dynamically generated pages with the pictures. This needs serverside code to be fed from the instagram api, which does not seem to be what you want.

How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?

There are other infinite-scroll plugins. The demos 2 and 5 on that site you found implement a simple "native" (i.e., no plugin) infinite scroll, both loading the new content via ajax. The demos 3 and 4 use the endless-scroll plugin with a few more scrolling options, although the demos do not include ajax.

Now you are free to decide how you would like to implement your script. You seem to want to get all image urls from instagram at first, but append (and therefore load the image files) only chunkwise. If instagram supports a paged api, you might want to combine both load processes.

This can be done with code like in the demos 2 to 5 - when the scroll reaches the page end, trigger your requests to load the images. After that happened, call Masonry's appended method on the new the img elements (or instaframe divs, like in your example).

Teferi

there is no need to create physical HTML files to use with infinite scroll plugin. – Tetralogy

No, but he seems to want only one single HTML file which infinitely loads pictures. – Teferi

That is fine. But why say things like "By design of that plugin, I would say NO" and " that particular plugin seems to be designed to support only static pages" , isn't that plain wrong ???? – Tetralogy

By "static page" I mean only that following pages must be available as full html documents on the server. It does not seem to support clientside dynamic content generation. – Teferi

I am Not able to follow your reasoning. Even one page can keep loading new images using client side JavaScript. He just needs to use the next_url returned by instagram API. check doc here:- instagram.com/developer/endpoints – Tetralogy

OK, if the instagram api itself provides these html(xml?) pages it might work. Yet, there is no js-hook for loading different uri than chosen by the navselector option - and no possibility to do something like in example #4 – Teferi