我目前正在使用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 */
}
这就是放置加载指示器的元素,页面加载后将淡出。所有其他元素都在页面上,并已设置其宽度和高度,并且可以正确初始化。