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

25 Views Asked by Peter Crom At 08 March 2024 at 11:45

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.

Original Q&A

There are 2 best solutions below

Taranjeet Singh On 08 March 2024 at 11:54

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';
}

Peter Crom On 15 March 2024 at 15:01

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.

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in LOADING

Related Questions in SHOW

Trending Questions

Popular # Hahtags

Popular Questions