Showing loading image during page load in Oracle ADF form which is created based BPM Human task flow

Hi All, 

We have an ADF form based on BPM Human task flow.  Page rendering was taking little time, during page load, user clicking on select one choice component. This causing an issue in dependent  list of values. And issue is coming only for the existing tasks.

So thought of providing loading image during page load and hide it once page is loaded completely to indicate a user not to click on anything during page load

Since bpm task open in an iframe window behavior, was not able to get adf component. So I used html,css and javascript approach to achieve this.

In my case, I have .jspx page not the .jsff

Step 1: Just below the af:document tag added div tag which contains loading giff image and text message as shown below

<div id="loading">

        <img id="loading-image" src="img/clock_positive_lg.gif" width="43"

             height="48" alt="loading gif"/>

             <p id ="text"><strong>Please wait...Page is still loading</strong></p>

            

      </div>

Step 2: Created css file to align the image and text as appropriate as shown below

<af:resource type="css">#loading { position:absolute; left:50%; top:50%;

                              border-radius:20px; padding:25px; z-index:100  }

                              #loading-image {}

                              #text{margin-left:-60px;}

      </af:resource>

Step 3: Main challenge I faced to hide the loading icon once page is loaded. Window.onload function was somehow not working in my case. So I used below approach

<af:resource type="javascript">

        

          window.addEventListener('load',function(){

             

              document.getElementById("loading").style.display = "none";

          },false);

         

    </af:resource>

This solves my problem