jQuery淡入网站/内容一旦加载?

问题描述 投票:8回答:6

是否有任何教程或插件可以在网站正确加载后将网站淡入视图,以限制任何震动等,因此内容基本上是否流畅?

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

例如,具有各种缩略图的投资组合页面,它们仅在准备好时才会显得平滑。

可以这样做吗?

感谢您的任何帮助 :)

jquery html jquery-plugins load fade
6个回答
16
投票

是的,用div(例如<div id="main-content">)包装你的内容,并在你的CSS中把它:

div#main-content { display: none; }

然后使用此脚本。

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

27
投票

首先,一个侧面点:一般来说,网页设计师花费大量时间来尝试改善感知页面加载时间,尽可能快地显示内容。这主动走向另一个方向,呈现一个空白页面直到一切准备就绪,这可能并不理想。

但如果它适合您的情况:

由于所有可见的都是body的后代,你可以加载body隐藏然后淡入。重要的是为没有JavaScript的用户包含一个后备(通常至少少于2%according to Yahoo,但仍然)。所以沿着:

(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在页面加载过程中很晚才会触发。但是你说你想要等到所有东西都装满了,所以这可能就是你想要做的。它肯定会让你的页面显得更慢......


4
投票

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

https://daneden.me/animate/

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


1
投票

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

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


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

0
投票
div#main-content { display: block; }

无论是否使用Javascript,都可以使用它

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

然后使用此脚本。

$(document).ready(function() {
 $('#main-content').fadeIn();
});
© www.soinside.com 2019 - 2024. All rights reserved.