Question

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

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

我有一个DIV课程＆＃34;内容＆＃34; （以＆＃34开头;显示：无＆＃34;）并且我的整个网站都在此标记内，执行此功能后所有内容都会显示。

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

第二个问题：我还在测试Google Maps API脚本（http://www.w3schools.com/googleapi/google_maps_basic.asp），以便在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 */
}

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

网站加载页面导致错误

1 个答案: