How can I hide the loading screen before the website be full loaded?

Question

I am working on my personal porfolio/website and I have the following bug I have been tring to fix it by myself but I don't know what else can I do.

The bug: As you can see in image 3 I have my logo (aa) and a text under it and it is still showing after the content page has been full loaded and it is showing. The aa and the under text take arround 3 seconds to hide after the loading sceen (image number 1) is hidden.

I have tried to remove the transation: 3 sec, and the bug is still there.

Any idea where the problem is and how can I fix it?

Also I dont know how is the best way to share this problem with you. I mean my code on this page in order to you can check it easily.

URL where the bug and code is DELETED

I have tried to create a mock up with the snippet tool, but without the images and all the text etc.. you cannot see the bug, becuse the mock up takes less than 1 sec to be full loaded. So then the only way I have found to show it is sharing the URL where my website is (I know it is not the best way to share a problem) and also the JS which I am useing to hidden the loading screen.

Thanks

 document.onreadystatechange = function() { var state = document.readyState if (state == 'complete') { setTimeout(function() { document.getElementById('interactive'); document.getElementById('load').style.visibility = "hidden"; document.getElementById('content').className = ''; }); } } 

If you know another way to share it with you let me know.

Answer 1

#load.notransation {
  z-index: -1;
}

... will fix it.

What's going on is that the loader gets hidden too late. By using a negative z-index you make sure that when the content loads, it loads above the loader, so it no longer matters that it's hidden too late.