加载后，jQuery 淡入网站/内容？答案

【问题标题】：jQuery Fade in Site/Content Once It's Loaded?加载后，jQuery 淡入网站/内容？
【发布时间】：2011-11-10 07:54:24
【问题描述】：

是否有任何教程或插件可以在网站正确加载后将其淡入视野，以限制任何不和谐等，从而使内容基本流畅？

我想如果它只是一个特定区域会更容易，因为页眉或页脚已经被缓存，从以前的页面......

例如带有各种缩略图的投资组合页面，它们只有在准备好后才会流畅显示。

这个可以吗？

感谢您的帮助:)

【问题讨论】：

标签： jquery html jquery-plugins load fade

【解决方案1】：

首先，附带一点：一般来说，网页设计师会花费大量时间来改善感知的页面加载时间，以尽可能快地显示内容。这积极地反过来了，在一切准备就绪之前呈现一个空白页面，这可能并不理想。

但如果它适合您的情况：

由于所有可见的都将是body 的后代，因此您可以将body 加载隐藏然后将其淡入。为没有JavaScript 的用户添加一个后备非常重要（通常至少@987654321 少于2% @，但仍然）。所以大致如下：

(Live Copy)

<!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($) {

  $(document.body).fadeIn(1000);

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

其中的脚本部分有几个变体，具体取决于您希望何时发生淡入：

等待“就绪”事件：

Live Copy

// This version waits until jQuery's "ready" event
jQuery(function($) {

  $(document.body).fadeIn(1000);

});

等待window#load 事件：

Live Copy

// This version waits until the window#load event
(function($) {

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

})(jQuery);

window#load 在页面加载过程的后期触发very，在所有外部资源（包括所有图像）加载之后。但是您说您想等到所有内容都加载完毕，所以这可能是您想要做的。它肯定会让你的页面看起来更慢...

【讨论】：

好 .. 很少有人考虑后备。 +1 好建议
是的。但我还是会放 body { display: none; } 到 CSS 文件中，因为我尽量避免嵌入这样的样式。
@sushilbharwani：是的。通常是 that's Yahoo's number），但仍然...
@mmmshuddup: 尼特，遇见选择器。 :-) 这是一个示例，f'cryin' out loud。虽然实际上，这使得回退更容易......
@T.J.Crowder window.onload 之后的淡入淡出是一个不错的想法，否则我猜它看起来不会干净。

【解决方案2】：

是的，用 div 包装您的内容（例如<div id="main-content">）并在您的 css 中输入：

div#main-content { display: none; }

然后使用这个脚本。

$(document).ready(function() {
    $('#main-content').fadeIn();
});

【讨论】：

如果有人没有启用 Javascript，是否有备用方案？

【解决方案3】：

实现此目的的另一种方法是通过 Animate.css 项目。它是纯 CSS，所以不需要依赖 JS：

https://daneden.me/animate/

只需将 'animated' 和 'fadeIn' 类添加到您的父元素，所有子元素都会淡入。

【讨论】：

【解决方案4】：


jQuery(document).ready(function(){
jQuery("#container").fadeIn();
});

container 是包含整个内容的 div 的 id。

【讨论】：

【解决方案5】：

$(document).ready(function() {
    $('body').hide().fadeIn('fast');
});

【讨论】：

【解决方案6】：

div#main-content { display: block; }

要使其在有或没有 Javascript 的情况下工作，您可以使用

document.getElementById("#main-content").style.display = "none";

然后使用这个脚本。

$(document).ready(function() {
 $('#main-content').fadeIn();
});

【讨论】：