Anyone knows if we can add loading before page render | Community
Skip to main content
B
bjhuchen
Level 2
June 30, 2022

Anyone knows if we can add loading before page render

  • June 30, 2022
  • 4 replies
  • 1852 views

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?

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

4 replies

ShaileshBassi
Community Advisor
ShaileshBassiCommunity Advisor
Community Advisor
June 30, 2022

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

    B
    bjhuchenAuthor
    Level 2
    June 30, 2022

    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.

     

     

      Mohit_KBansal
      Adobe Employee
      Mohit_KBansalAdobe Employee
      Adobe Employee
      June 30, 2022

      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
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        June 30, 2022

        Hi,

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

        Arun Patidar
          SantoshSai
          Community Advisor
          SantoshSaiCommunity Advisor
          Community Advisor
          June 30, 2022

          Hi @bjhuchen ,

          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

          Santosh Sai
            Terms & ConditionsAccessibility statement

            Loading footer...