Tutorial on How to Implement Infinite Loading in Laravel

Tutorial on How to Implement Infinite Loading in Laravel

In this tutorial, we will learn how to implement infinite loading in laravel. We all know, Laravel comes up with wondeful pagination system inbuilt. Thus, we will not be doing major walk-through but quick simple hack to make "Infinite loading" job successful.

First thing that you need to do is return the data that you want to infinitely scroll from your  controller :-

public function getPost(){
    $post = Post::select('id', 'title', 'image', 'excerpt')->paginate(10);
    return view('blog-index', compact('post'));

Now, as we are getting data with "10 per page" as per above "paginate(10)" method, we can move on to our blade file which is "blog-index.blade.php" here as per above mentioned view.

For the purpose of our Infinite loading, we will be using library called :- "jscroll" which is available here :- https://github.com/pklauzinski/jscroll



<div class="scroller">
    @foreach($post as $acticle)
            <a href="{{ url('blog/'.$article->id.'/'.str_slug($acticle->title)) }} ">
                <img alt="" src="{{$article->image}}">
                <div><span>{{$article->title}}</span> <br> {{ $article->excerpt }} </div>
    {{ $post->links() }}



<script src="http://yoursite.com/jquery.js"></script>
<script src="http://yoursite.com/jquery.jscroll.min.js"></script>
        //hides the default paginator
            debug: false,
            autoTrigger: true,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.scroller',
            callback: function() {
                // Hide the paginator from view, 
                // don't confuse with above hide as 
                // below hide is once new content is loaded, 
               // laravel will print out the pagination again, 
               // so for everytime new contents are loaded, we need to make sure, pagination is not visible.

Few Important Note :-

1.  The jscroll method is called on the selector for which you want your scrollable content contained within. 

2.  debug (false) - When set to true, outputs useful information to the console display if the console object exists.

3.  autoTrigger (true) - When set to true, triggers the loading of the next set of content automatically when the user scrolls to the bottom of the containing element. When set to false, the required next link will trigger the loading of the next set of content when clicked.

4.  nextSelector ('.pagination li.active + li a') - The selector to use for finding the link which contains the href pointing to the next set of content. If this selector is not found, or if it does not contain a href attribute, jScroll will self-destroy and unbind from the element upon which it was called.

5.  contentSelector ('div.scroller') - A convenience selector for loading only part of the content in the response for the next set of content. This selector will be ignored if left blank and will apply the entire response to the DOM.

6.  callback  - Optionally define a callback function to be called after a set of content has been loaded.


That is all, Let me know, if this post has help you, you can share it and ask your question in below comment.


Recent Posts