Html Question posted in
Some basic documentation can be found here.

Html – showing loader while loading and show result when finished works fine in Firefox but not in Chrome

I have a familytree site that can produce a complete tree (may show thousands of members) which takes some time to figure out. So while loading it shows a picture of a growing tree, and when ready it shows the actual family tree. Works fine in Firefox, but in Chrome it produces an empty page when loaded.

Here is how I did it:

html:

<body onload='JavaScript:show();'> <div id='loader'>...<img ...></div> <div id='tree' class='hidden'>... tree ...</div>

css:

`.hidden {display: none;}`

Javascript:

`function show()
{
   let temp = document.getElementById ('loader');
   let tree = ocument.getElementById('tree');
   temp.hidden = true;
   dump.hidden = false;
   dump.style.display = 'block';
}`

I was expecting to have the same result in Chrome as in Firefox. FF shows the build tree after loading, but Chrome shows an empty page.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you, Taranjeet Singh, it now works fine in my local environment. But to my surprise it works differently after uploading to my online server: The temporary dev is not show there. I tried an ini_set ('output_buffering', '4096'); in combination with: echo str_pad ($wait, 4096, ' '); after the temporary dev is written. This works fine in the local environment, but the online server does not show the temporary dev, only the full tree after loading has finished.


  2. 0

    It seems there is a type error in your JavaScript function.
    Instead of this:

    let tree = ocument.getElementById('tree');

    Update your code to this:

    let tree = document.getElementById('tree');

    However, in your function, the **dump** variable is not defined anywhere else. Indeed, the functions work well in my local environment.

    function show() {
    let temp = document.getElementById('loader');
    let tree = document.getElementById('tree');
    temp.hidden = true;
    tree.hidden = false;
    tree.style.display = 'block';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search