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

Create a File Upload Service using Node.js / Express / Multer

Problem:    I needed to create a form that essentially uploads a file to a server, then posts the rest of the form data to a second server with the new file name. In other words, post the image to an “Image” server, then posts the form data (with the file URL) to a “Form Data” server. Solution:  Create an Express server that uses the “Multer” library to accomplish this. The Code: Create the express server and have it listen on a specific port var express = require( 'express' ); var app = express (); app . listen ( 3313 , function (){     console . log ( 'listening on port 3313' ); }); Install Multer.  Read here: https://www.npmjs.com/package/multer Include Multer to your express app.  We’ll be tweaking the storage properties so you can name the file whatever you like. At the end, you should have an “upload” object you’ll be using in the next step. be sure to change the file destination of your choice. var expre...
6 comments
Read more