Javascript 网站fadein之前的加载程序_Javascript_Jquery_Html_Fadein

Javascript 网站fadein之前的加载程序

javascript jquery html

Javascript 网站fadein之前的加载程序,javascript,jquery,html,fadein,Javascript,Jquery,Html,Fadein,我有以下示例代码： <!DOCTYPE html> <html> <head> <title>Example</title>  <style type="text/css"> b

我有以下示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
     inline here just for purposes of the example
-->
<style type="text/css">
body {
    /* Hide it for nifty fade-in effect */
    display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
    /* Re-displays it by overriding the above */
    display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {

$(window).load(function() {
$(document.body).fadeIn(1000);
});

})(jQuery);
</script>
</body>
</html>

如何使其淡入以便看起来更整洁？

您可以为loader元素定义一些HTML，然后在淡入页面时淡出

但是，当前您正在隐藏/淡入页面正文。您需要将所有要延迟显示的内容包装到另一个元素中，作为加载程序的同级

例如：

<body>
  <div id="loader"><img src="loading-image.png"></div>
  <div id="page-content">
    <!-- content here -->
  </div>
</body>

然后将CSS和JS更改为引用

#页面内容

，而不是

正文

如果你正在淡入页面，为什么它不同时淡入横幅图像？我想你可以用同样的机制来包装它。

显然它会褪色，但横幅可能会在几秒钟后出现而不会褪色！我不明白，如果你能把问题复制出来，让我们能更准确地理解你的意思，那有什么用。

$("#banner").css("background-image","url('css/images/overlay.png'), url('images/" + randomNum + ".jpg')").fadeIn(1000);

<body>
  <div id="loader"><img src="loading-image.png"></div>
  <div id="page-content">
    <!-- content here -->
  </div>
</body>