Anyone knows if we can add loading before page render

[aimee8586]

We have AEM page with hundreds of custom components which cause a little long time to render the page, we want to add a loading status, but there are no html elements before the page is ready.

Any suggestion?

[ShaileshBassi]

@aimee8586 

Use the following HTML (at the top of the body is best):

<div id="loading"></div>

And this CSS:

#loading {
    background: url('spinner.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

And the following JavaScript (uses jQuery):

function hideLoader() {
    $('#loading').hide();
}

$(window).ready(hideLoader);

// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);

Hope this helps!

Thanks

[aimee8586]

Thanks.

I doesn't work for me..

Anything add in the page component body.html will not displayed until the page is starting to load..

My scenario is open a page, the page request waiting for server response time is long. When this request get response, then the page DOM is ready, and the page html can be rendered.

[mobans]

Checkout your resources included in head section. HTML/Resource rendering starts from top to bottom, so if head section has many resources, will cause delay to load body. Once you have only needed resources in head (css files, meta tags) and other resource requests moved towards end of HTML, then solution provided by @ShaileshBassi should work.

You should also consider using preload/prefetch meta tags [1].

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload 

[arunpatidar]

Hi,

Why does the page taking too long to load? Are you not caching the page? 

[SantoshSai]

Hi @aimee8586 ,

May I know what is the use of adding loading status of the page/component?

• If you would you like to track the time for each component -
  Starting from version AEM 6.0, there is OOTB feature to measure rendering time for each component on a page.
  It is accessible through TouchUI, Developer mode.
  
  
  
  
• If you need them to have it rendered to the end users - IMHO it is not good idea to expose your custom component status to the end users. 

Regards,

Santosh