How to detect if all the components on the page has loaded or not | Community
Skip to main content
sbg19
sbg19
Level 2
September 7, 2018
Solved

How to detect if all the components on the page has loaded or not

  • September 7, 2018
  • 6 replies
  • 5049 views

HI,

I was trying to check if all the components on the page have loaded or not from the javascript file. If they have loaded, then I am calling a particular js function.
I have tried with document.ready(), window.onload, and few other functions.

The problem is the page is getting loaded first and all the data in the components is getting loaded after some processing.
this is the reason why the above mentioned functions are not able to do the job

it would be really helpful if anyone can help me with this.

Thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by joerghoh

Components typically are not loaded with dedicated JSON requests, unless you have written your components in that way. The typical components are rendered as part of the HTML page and there are no dedicated JSON requests for them. In that case it should never be a problem to start a certain JS functions when all the HTML has been loaded.

If your components are rendered as part of the HTML page, but they start loading some stuff via JSON on their own, then it's your turn to signal when they have loaded completely. But that's no way specific to AEM.

(Maybe I haven't understood your question correctly, so please correct me if my assumptions were wrong.)

Jörg

6 replies

joerghoh
Adobe Employee
joerghohAdobe Employee
Adobe Employee
September 7, 2018

you are referring to the authoring environment? Should it be part of the page rendering (that means visible on publish as well) or an authoring only function (overlay)?

Jörg

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 8, 2018

Hi,

did you try below

$(window).bind("load", function() {

// your code

});

If it doesn't work I'll suggest you to put some delay and then execute your code.

Arun Patidar
sbg19
sbg19Author
Level 2
September 9, 2018

Yes, I have tried this and I have tried using the timeout function as well but nothing seems to work.

Just to be more specific, I have a js file in which I am cheching the presence of some class name and based on this class name's presence, I am implementing some logic.

So the problem is if I call this js from doc.ready or window.load or some timeout function, by the time the js funct is called, the page would have loaded but not the components. So I am getting the name presence as false all the time.

Sequence:

The page is getting loaded.

The js is getting called,

The components are getting loaded.

sbg19
sbg19Author
Level 2
September 9, 2018

It should be part of page rendering as well.

joerghoh
Adobe Employee
joerghohAdobe EmployeeAccepted solution
Adobe Employee
September 9, 2018

Components typically are not loaded with dedicated JSON requests, unless you have written your components in that way. The typical components are rendered as part of the HTML page and there are no dedicated JSON requests for them. In that case it should never be a problem to start a certain JS functions when all the HTML has been loaded.

If your components are rendered as part of the HTML page, but they start loading some stuff via JSON on their own, then it's your turn to signal when they have loaded completely. But that's no way specific to AEM.

(Maybe I haven't understood your question correctly, so please correct me if my assumptions were wrong.)

Jörg

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
September 10, 2018

document.ready(), window.onload would not work in this case, as the components are rendered in AEM as a part of the page only. There is no event triggered signaling this by default . It could be the case that your component might got rendered on the HTML but they are still doing some back-end stuff at their own. This can't be notified to you unless you have customized it.

You have to write a custom event hardener for this one, refere Creating an Adobe Experience Manager 6.4 Project using Adobe Maven Archetype 13 [See SimpleResourceListener ].

-Kautuk

Kautuk Sahni
Terms & ConditionsAccessibility statement

Loading footer...