javascript - 网站加载页面导致错误

Question

我目前正在使用 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/来制作视差效果。错误是:使用的图像根本没有出现，当我调整浏览器窗口大小时，图像突然出现并且一切开始正常工作(在谷歌浏览器和火狐浏览器中也是如此)。如果我关闭加载脚本，它工作正常。

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

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

Answer 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 */
}

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