jQuery淡入网站/内容一旦加载？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery淡入网站/内容一旦加载？相关的知识，希望对你有一定的参考价值。
是否有任何教程或插件可以在网站正确加载后将网站淡入视图，以限制任何震动等，因此内容基本上是否流畅？
我想如果它只是一个特定区域会更容易，因为页面或页脚已经被缓存，从之前的页面...
例如，具有各种缩略图的投资组合页面，它们仅在准备好时才会显得平滑。
可以这样做吗？
感谢您的任何帮助 ：）
是的，用div（例如<div id="main-content">）包装你的内容，并在你的CSS中把它：
div#main-content { display: none; }
然后使用此脚本。
$(document).ready(function() {
$('#main-content').fadeIn();
});
首先，一个侧面点：一般来说，网页设计师花费大量时间来尝试改善感知页面加载时间，尽可能快地显示内容。这主动走向另一个方向，呈现一个空白页面直到一切准备就绪，这可能并不理想。
但如果它适合您的情况：
由于所有可见的都是body的后代，你可以加载body隐藏然后淡入。重要的是为没有javascript的用户包含一个后备（通常至少少于2％according to Yahoo，但仍然）。所以沿着：
<!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>
脚本部分的几个变体，取决于您希望淡入发生的时间：
等待“准备好”事件：
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
等待window#load事件：
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
在所有外部资源（包括所有图像）都已加载后，window#load在页面加载过程中很晚才会触发。但是你说你想要等到所有东西都装满了，所以这可能就是你想要做的。它肯定会让你的页面显得更慢......
另一种实现此目的的方法是通过Animate.css项目。它纯CSS，所以不需要依赖JS：
只需将'animated'和'fadeIn'类添加到您的父元素中，所有子项都将淡入。
jQuery(document).ready(function(){
jQuery("#container").fadeIn();
});
其中container是包含整个内容的div的id。
$(document).ready(function() {
$('body').hide().fadeIn('fast');
});
div#main-content { display: block; }
无论是否使用Javascript，都可以使用它
document.getElementById("#main-content").style.display = "none";
然后使用此脚本。
$(document).ready(function() {
$('#main-content').fadeIn();
});
以上是关于jQuery淡入网站/内容一旦加载？的主要内容，如果未能解决你的问题，请参考以下文章
在页面加载时，使用 jQuery 淡入淡出一个又一个 div