jquery，隐藏内容直到加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9734021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery, hide content until loaded
提问by user1163818
I am currently using this script to fade page transitions:
我目前正在使用此脚本淡化页面过渡：
$(document).ready(function() {
$(window).bind("unload", function() {});
$("body").css("display", "none");
$("body").hide();
$("body").fadeIn(2000);
$('a.fade1, a.fade2, a.fade3, a.fade4').click(function(event) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(700, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});?
this works like a charm when the content is alredy in cache, but when an image needs to load it will momentarily appear then be hidden and faded in
当内容已经在缓存中时，这就像一个魅力，但是当需要加载图像时，它会暂时出现然后被隐藏和淡入
so what i need is a way to hide the content until it is fully loaded and only after that let it be faded in
所以我需要的是一种隐藏内容的方法，直到它完全加载，然后才让它淡入
hope someone can help me, thanks in advance
希望有人可以帮助我，提前致谢
回答by Stefan
Use CSS to hide the element by default and then show it when you like to.
默认情况下使用 CSS 隐藏元素，然后在需要时显示它。
CSS
CSS
body {
display: none;
}
jQuery
jQuery
$(window).load(function() {
// When the page has loaded
$("body").fadeIn(2000);
});
The load event is sent to an element when it and all sub-elements have been completely loaded.
当一个元素和所有子元素都被完全加载时，加载事件被发送到一个元素。
See the load event.
请参阅加载事件。
You might also consider to replace your "fadeX" classes with a single class, something like "fade"
你也可以考虑用一个类替换你的“fadeX”类，比如“fade”
回答by Chris
I actually wouldn't use CSS to start with and here's why. If for some reason JS fails to load on the page, it will also fail to actually show the content of your page as well. I'd keep everything in the script and write to the DOM, so if it fails, nothing happens.
我实际上不会使用 CSS 开始，这就是原因。如果由于某种原因 JS 无法在页面上加载，它也将无法实际显示您的页面内容。我会将所有内容保留在脚本中并写入 DOM，因此如果失败，则什么也不会发生。
<script>
document.write('<style>body { visibility: hidden; } </style>');
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
delay();
});
function delay() {
var secs = 1000;
setTimeout('initFadeIn()', secs);
}
function initFadeIn() {
jQuery("body").css("visibility","visible");
jQuery("body").css("display","none");
jQuery("body").fadeIn(1200);
}
</script>
回答by Andreas Wong
Why not put all the initial css using... CSS?
为什么不把所有的初始 css 都使用... CSS？
<head>
<!-- some stuff of yours -->
<style>body{display:none}</style>
</head>
<body>
</body>
Then your js needs to only worry about calling fadeIn(). This way when browser renders <body>tag, it already knows to hide it, so it won't be shown at all until your fadeIn()gets called.
那么你的 js 只需要担心调用fadeIn(). 这样，当浏览器呈现<body>标签时，它已经知道隐藏它，因此在您fadeIn()被调用之前它根本不会显示。
回答by Shomz
CSS for each image: visibility: hidden;
每个图像的 CSS：可见性：隐藏；
jQuery.ready: visibility: visible; (or use a fade or whatever you like).
Why visibilityinstead of 'display'? displaywill make a lot of 'jumps' and 'glitches' on your page when items start loading.
jQuery.ready：可见性：可见；（或使用淡入淡出或您喜欢的任何东西）。为什么visibility而不是“显示”？display当项目开始加载时，会在您的页面上产生很多“跳跃”和“故障”。
Also, you can try using jQuery's load methodinstead of ready.
此外，您可以尝试使用jQuery 的 load 方法而不是ready.
