jQuery在加载网站/内容后淡入？

是否有任何教程或插件将网站放入视图中，一旦它正确加载，以限制任何震动等，所以内容基本上显示平稳？jQuery在加载网站/内容后淡入？

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

例如各种缩略图的组合页面，他们只出现准备就绪时顺利。

可以这样做吗？

谢谢你的任何帮助:)

2011-11-10 Jezthomp

是的，有一个div（例如<div id="main-content">）包装你的内容，并在你的CSS把这个：

div#main-content { display: none; }

然后使用这个脚本。

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

来源

2011-11-10 07:55:48

如果有人没有启用Javascript，是否有这种退步？ – optimus203


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

，其中容器是包含整个内容的div ID。

来源

2011-11-10 07:57:43

首先，一个观点：一般来说，网页设计师花费大量时间试图提高感知页面加载时间，尽可能快地显示内容。这种方式正在积极转向，直到一切准备就绪，呈现一个空白页面，这可能并不理想。

但如果它是适合您的情况：

既然一切可见的将是body的后裔，你可以加载body隐藏，然后在褪色，那将是非常重要的包括没有JavaScript为用户提供回退（通常至少少于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火灾非常在页面加载过程不迟，毕竟外部资源（包括所有图片）已加载。但是你说你想等到所有的东西都加载完毕，所以这可能是你想要做的。它肯定会让你的页面看起来更慢......

来源

2011-11-10 07:57:47

好..很少有人想回想起来。对于Nice建议+1 +1 –

正确。但我仍然会把身体{display：none; }到CSS文件中，因为我尽量避免使用这种嵌入式样式。 –

@sushilbharwani：是的。这通常是<= 2％的访问者（至少，这是雅虎的电话号码）（http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/ ）），但仍然... –

另一种方法是通过Animate.css项目。它的纯CSS，所以没有必要依靠JS：

https://daneden.me/animate/

就在“动画”和“淡入”类添加到您的父元素和所有的孩子将在淡出

来源

2014-01-03 02:35:12 direct

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

来源

2015-09-29 12:24:19

jQuery在加载网站/内容后淡入？

回答

相关问题