Maico Williams Maico Williams - 11 months ago 48
Javascript Question

Website loading page causing bugs

I am currently creating a webpage using HTML/CSS and jQuery/Basic JS.
I'm using a jQuery code to show a GIF image while the website is loading

$(window).load(function() {
$(".loading").fadeOut(700, function() {

I have a DIV with class"Content" (which starts with "display: none") and my entire website is inside this tag, everything will appear after the execution of this function.

The problem is that I realized that this script is making unexpected side effects with other JS/jQuery codes.
For example, I was using this script to make parallax effects. The error was: The image used wasn't appearing at all, when I resize the browser window, the image suddenly show up and everything starts to works fine (same thing in Google Chrome and Firefox). If I turn the loading script off, it works fine.

Second issue: I was also testing Google Maps API script ( to include a map in a DIV and faced the same issue. I could even see the DIV spacing but all blank, resized the browser (no matter which direction) and it's starts to work.

I suspect that I probably doing this loading thing in the wrong way but that's the first time that I'm using that. Can anyone tell me what's wrong?

Answer Source

If you absolutely need to show a loading indicator, I think it would be better not to hide your content via display: none.

Rather try to overlay it with your loading content, for example with a white element with the CSS:

.loading-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 999; /* depends on your situation */

So that's the element where you put your loading indicator and that you will fade out once the page has loaded. All other elements are there on the page, have their widths and heights set and can initialize properly.