How to Progressively Load Content on Scroll using jQuery

Progressively Load Content

On an average, what is the load time of a page on your site? Are you happy with it? (I guess you’re looking to improve it, since you’re reading this article 😀 ) To start with, you should know, that there isn’t an acceptable page load time. So if you had decided on a number, it’s time to get it out of your head. Acceptable page load time, depends on the kind of content present on your site, and the type of audience you have. Nevertheless, it is a good practice to optimize the content on your site, to improve your page load time.

How to Optimize Page Load Time?

There are a lot of factors which decide the time a page will take to load. For example, you might have a lot of CSS and JavaScript files, which means the number of HTTP requests a page has to make to display the content, is high, thus increasing load time. Or your page might be content heavy, due to a lot of images or videos being present. In such cases, you need to undertake simple measures to improve the load time.

Start with the basics

1. Combine your CSS and JS into fewer files.
2. Optimizing content such as images and videos, before adding them to a page.

Still Not Helping? Employ Lazy Loading

If you want to improve the loading time further, you can use a progressive loading strategy. With progressive or lazy loading, you can defer the display of a section of content, till the user has scrolled to it.  Usually, lazy loading is used for media content, such as images or videos.

“Let’s take a look at Lazy Loading in detail. And the idea behind it.”

Progressively Load Content on Scroll

Have you heard the term ‘Above the Fold’? It refers to the area (of a page) that is visible in your browser, when the page is first loaded. The fact is, your site visitors spend 70% of their time above the fold. Which means only 30% will scroll down. So then, instead of loading all of the page content at once, you can instead choose to load, the ‘above the fold’ content first, to improve your page load speed, and then progressively load content, as the visitor scrolls.

Simple enough, right? But then, how would you know when exactly a user has scrolled? And if so, what part of the content needs to be loaded?

Don’t worry. I’m here to help. We’ll take a look at progressive loading, one step at a time.

Divide Content Across Sections

Start by dividing the content on your page, into sections, or divs. For example, say 40% of your web page is displayed ‘above the fold’. You can place all the ‘above the fold’ content in a single section, and then place the remaining content in a different section (or across several sections). This can help you identify, content which needs to be displayed initially, and sections which will be displayed gradually.

Progressive Loading

Identify When a Visitor Scrolls

To identify every user scroll, you can use the jQuery Window Scroll function. Every time a window is scrolled, this function will be called. You need to then display content, using this function.

jQuery(window).scroll();

But this is not all. You will also need to know, the percentage a user has scrolled, to decide the sections which have to be displayed.

Hence, we need the position of the scrollbar, actually the bottom position of the display window. The sections of your page below this position need not be loaded. They can be loaded when the user scrolls further.

In jQuery, the scrollTop function can be used, get the vertical scrollbar position. But it returns the top position of the scrollbar. To get the bottom position, we can use the following function:

var bottom_position = $(document).height() -­ ($(window).scrollTop() + $(window).height());

This position will help us decide which section has to be displayed. You will need to handle the display using AJAX.

Display Content Using AJAX

Finally, the content has to be displayed using AJAX, to avoid reloading of the page. This can be done using the below given code.

jQuery(window).scroll(function(){

    // get the bottom position
    var bottom_position = $(document).height() - ($(window).scrollTop() + $(window).height());
    var scroll_data = {
            action: 'user_scroll',
            container_id: container_id
        };      
    $.ajax({
             url: wdm_url,
             data: scroll_data,
             context: document.body
           }).done(function(response) {
                // do stuff here
              });     
});

The content to be displayed on your site, the size of each page, might not always be under your control. But following steps to optimize the content being displayed, and employing strategies such as progressive loading, can surely improve your site’s performance, and lead to happy visitors.

• WordPress Tips & Tricks
• With tags: jQuery, Performance Optimization

Share:

• Sagar K

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!