Skip to main content

Easy Infinite Scroll Using jQuery

Problem:
Loading a large record dataset on a page can slow down the app quite a bit.  How can I load a small number of records incrementally when the user scrolls to the end of the page?

Solution:
Infinite scrolling! Most Facebook users experience infinite scrolling as they scroll to view posts. This is made easy using jQuery.

The Code:
Consider this event handler:

    $(window).scroll(function () {
        if($(document).height() <= $(window).height()+300) {
        }
    });

If the height of the page reached the window height + 300 (or, scrolled to about 2/3 of the page), then do something.  In my case, I would make a service call for the next 3 records (assuming the record count on load was 3 records).  Let’s say, records 4 to 6.  Here’s the completed code:

var currentPage = 1;
 
$(window).scroll(function () {

    if ($(document).height() <= $(window).height()+300) {



        $.ajax('http://www.somesite.com/myservice', {

            data: {

                total: '3', // only 100 at a time

                start: (4 * currentPage)

            },

            success: function(data) {

                appendNewRecords(data.results); //add to existing records
            }

        });

        currentPage++; //setting up next set

    }

});



function appendNewRecords(results){

    results.forEach(function(record){

        $(body).append('<div>' + record.name + '</div>');

    });

}

Here's the new html rendering:

<html>
<head>
<title>example</title>
</head>
<body>
<div>Tom</div> <!--rendered on load-->
<div>Dick</div>
<div>Harry</div>
<div>Larry</div> <!-- added after scroll event is triggered-->
<div>Mo</div>
<div>Curly</div>
</body>
</html>

Hope this helps!

References:

https://www.sitepoint.com/implementing-infinite-scroll-jquery/

Comments

Post a Comment

Popular posts from this blog

Resolved Sitecore "If you publish now, the selected version will not be visible on the web site" warning

The Problem:   Unable to publish any Sitecore item within a particular site, even out of the workflow. Rather, a warning reads " If you publish now, the selected version will not be visible on the web site " What I've Discovered: I couldn't publish any item in the site, not just one or two I viewed all parent items of the items in question The main home page displayed a different warning " This item will never be published because it's publishable option is disabled " Another sitecore developer reminded me of the standard fields option View --> check standard fields to show all standard page fields Found out that somebody checked Never Publish within the publishing section The Fix: After I unchecked the checkbox and saved the change, I was able to publish again.  :) Conclusion: Looks like another Sitecore user thought the children items would not be affected by this change.  Lesson  learned.
Post a Comment
Read more

[Resolved] Sitecore ParseException: End of string expected at position...

Problem:  I have a line of code that uses Sitecore Fast Query to pull all items + children starting with a site item, like so: Item [] allItems = db.SelectItems( "fast:" + sitecorePath + "//*" ); Unfortunately, I would get a Sitecore parsing error at runtime: ParseException: End of string expected at position... Turns out Sitecore doesn't like hyphens ('-') in any sitecore path when using fast query, which I have a few distributor sites in a folder which contained hyphens. Solution: I create a simple method that resolves a sitecore path to be Sitecore fast query friendly:             string sitecorePath = "" ;             if (siteItem.Paths.FullPath.Contains( "-" ))             {                 String [...
Post a Comment
Read more

Basic Recursion Example in JavaScript

Problem :  I've been having to write solutions which required some sort of recursion.  The last recursion assignment I had to write was a homework assignment about 10 years ago. I remembered the concept, but forgot how to write it. Solution :  Here’s a simple example of recursion. I start with an array, and after I fire the function, I remove that index from the array, so it shrinks. Once the array is empty, recursion stops.  Pretty straight forward! Code : let books = [ 'Chosen by God', 'Holiness of God', 'Essential Truths', 'Justified by Faith' ]; function readBooks(b){ while (b.length > 0){ console.log('I\'v read ' + b[0]); b.shift(); readBooks(b); } } readBooks(books);
Post a Comment
Read more