Jez*_*omp 9 html jquery load fade jquery-plugins
是否有任何教程或插件可以在网站正确加载后将网站淡入视图,以限制任何震动等,因此内容基本上是否流畅？
我想如果它只是一个特定区域会更容易,因为页面或页脚已经被缓存,从之前的页面...
例如,具有各种缩略图的投资组合页面,它们仅在准备好时才会显得平滑.
可以这样做吗？
感谢您的任何帮助 :)
T.J*_*der 28
首先,一个侧面点:一般来说,网页设计师花费大量时间来尝试改善感知页面加载时间,尽可能快地显示内容.这主动走向另一个方向,呈现一个空白页面直到一切准备就绪,这可能并不理想.
但如果它适合您的情况:
由于所有可见内容都是后代body,因此您可以加载body隐藏然后将其淡入.对于没有JavaScript的用户包含回退非常重要(至少根据Yahoo,通常少于2%,但仍然如此).所以沿着:
<!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火灾非常在页面加载过程后期,所有的外部资源(包括所有图片)后,已加载.但是你说你想要等到所有东西都装满了,所以这可能就是你想要做的.它肯定会让你的页面显得更慢......
Yes*_*rry 17
是的,用div(例如<div id="main-content">)包装你的内容,并在你的CSS中把这个:
div#main-content { display: none; }
然后使用此脚本.
$(document).ready(function() {
$('#main-content').fadeIn();
});
完成此操作的另一种方法是通过Animate.css项目。它是纯CSS，因此无需依赖JS：
只需将'animated'和'fadeIn'类添加到您的父元素中，所有子项就会淡入。
| 归档时间： |
|
| 查看次数： |
50364 次 |
| 最近记录： |