How to Progressively Load Content on Scroll using jQuery

Tired of slow-loading websites? We all know how frustrating it can be to wait for a page to load, only to lose patience and leave. What if you could make your site faster without cutting down on content? Enter progressive loading. Instead of loading everything at once, you load content as the user scrolls. It’s a simple yet effective way to keep your site fast and your visitors engaged.

This approach not only improves user experience but also helps in managing server load efficiently. By loading content progressively, you ensure that users get to see the most important parts of your site first, keeping them hooked while the rest loads in the background. Plus, it’s a great way to save bandwidth and improve overall site performance.

Not your forte?

If coding and optimization aren’t your strong suit, that’s perfectly okay. Our WordPress experts can handle the technical details for you, ensuring your site loads quickly and efficiently.

Get in touch

How to Optimize Page Load Time

There are a lot of factors that 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.

 

Short on time? Let our WordPress experts help optimize your site for faster loading times!

Contact us today

 

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.”

[space]

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.

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.

Following these steps can significantly improve your site’s performance, making it faster and more efficient. If you need help implementing these techniques, our experts are just a click away.

Get in touch