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

[sbg19]

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

[Jörg_Hoh]

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]

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.

[sbg19]

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]

It should be part of page rendering as well.

[Jörg_Hoh · Accepted solution]

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]

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