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

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

我有一个带有“内容”类的DIV(以“display:none”开头),我的整个网站都在此标记内,执行此功能后,所有内容都会出现。

问题是我意识到该脚本正在与其他JS / jQuery代码一起产生意外的副作用。
例如,我正在使用此脚本http://pixelcog.github.io/parallax.js/制作视差效果。错误是:根本没有显示使用的图像,当我调整浏览器窗口的大小时,图像突然显示,并且一切开始正常运行(在Google Chrome和Firefox中也是如此)。如果我关闭加载脚本,则可以正常运行。

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

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

最佳答案

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

而是尝试将其与您的加载内容重叠,例如,将CSS包含在白色元素上:

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

这就是放置加载指示器的元素,页面加载后将淡出。所有其他元素都在页面上,并已设置其宽度和高度,并且可以正确初始化。

10-05 20:52
查看更多