Optimize page performance instead of using javascript scroll event

Question

0.00/5 (No votes)

See more:

I have a long-scrolling web page with many div elements. Each div element contains different sections of the page.

For better performance i.e. for reducing the load time of the page I am only loading the first two div elements with data during page load.

For populating the rest of the div elements with data I am using JavaScript scroll event. Whenever a user scrolls beyond the div with data I am populating the next div data dynamically with ajax.

Please refer to the sample code :-

What I have tried:

var div3 = 1;
var div4 = 1; 

$(window).scroll(function () {
        var scrltp = $(window).scrollTop();        
        if ((scrltp) > $("#div2").offset().top) {      
            if (div3 == 1) {
                div3 = 0;
                $("#dv3").load("PageUrl"); //Action Method url
            }
        }
        if ((scrltp) > $("#dv3").offset().top) {            
            if (div4 == 1) {
                div4 = 0;
                $("#dv4").load("PageUrl");
            }
        }
       ..........
       ..........
}

Is there a better way to optimize page performance instead of using the scroll event?

Posted 3-May-20 3:48am

kole_manas

Updated 3-May-20 8:00am

Add a Solution

Comments

MadMyche 3-May-20 10:14am

Here is a question for you: If there was a better overall method than this, wouldn't Facebook et al be using them?

[no name] 3-May-20 10:57am

I'm completely noob on this, but I have a question. Is it a bad idea to let a background thread read the next pages and don't wait on a scroll event (and would that be possible)?
Thank you in advance.

MadMyche 3-May-20 12:17pm

I am not an expert on JS so cannot tell you affirmatively. I do know poorly written JS can slow the user experience badly.
But your thoughts are similar to mine; do the initial load and after everything is loaded then load the data for the next 'chiunks'

[no name] 3-May-20 13:02pm

Thank you very much for your assessment.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Patrice T · Answer 1 · 2020-05-03T08:02:00

Quote:
Whenever a user scrolls beyond the div with data I am populating the next div data dynamically with ajax.

Techniques exist to hide loading time most of the time.

The trick is to load all visible divs +1.
Then when user start to scroll down, there is no loading time for next div because it is already there.
And when last div become visible, start to load next div.
The time user scroll and read last div is used to load next div.