网站加载页面导致错误答案

【问题标题】：Website loading page causing bugs网站加载页面导致错误
【发布时间】：2017-01-03 05:55:01
【问题描述】：

我目前正在使用 HTML/CSS 和 jQuery/Basic JS 创建网页。我正在使用 jQuery 代码在网站加载时显示 GIF 图像

$(window).load(function() {
    $(".loading").fadeOut(700, function() {
        $(".Content").fadeIn(700);
    });
});

我有一个带有“Content”类的DIV（以“display: none”开头），我的整个网站都在这个标签内，所有的东西都会在这个函数执行后出现。

问题是我意识到这个脚本对其他 JS/jQuery 代码产生了意想不到的副作用。例如，我使用这个脚本http://pixelcog.github.io/parallax.js/ 来制作视差效果。错误是：使用的图像根本没有出现，当我调整浏览器窗口的大小时，图像突然出现并且一切都开始正常工作（在谷歌浏览器和 Firefox 中也是如此）。如果我关闭加载脚本，它工作正常。

第二个问题：我还在测试 Google Maps API 脚本 (http://www.w3schools.com/googleapi/google_maps_basic.asp) 以在 DIV 中包含地图并遇到同样的问题。我什至可以看到 DIV 间距，但全是空白，调整了浏览器的大小（无论哪个方向），它开始工作了。

我怀疑我可能以错误的方式执行此加载操作，但这是我第一次使用它。谁能告诉我怎么了？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果您绝对需要显示加载指示器，我认为最好不要通过display: none 隐藏您的内容。

而是尝试用你的加载内容覆盖它，例如使用带有 CSS 的白色元素：

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

这就是你放置加载指示器的元素，一旦页面加载，你就会淡出。所有其他元素都在页面上，设置了它们的宽度和高度，并且可以正确初始化。

【讨论】：

这个。如果使用display: none 加载所有与定位相关的脚本（GMaps 等），它们将无法正常运行。
Aaaw 有效。做了一些测试，正如 hexblot 所说，问题是由display: none; 引起的，一旦我知道我可以避免这种情况。谢谢。
添加<noscript><style>.loading-wrapper{ display:none; }</style></noscript> 也是值得的，以防您的用户关闭了 JS，这样他们就不会一直盯着loading-wrapper。