隐藏跨度（或 div）直到 javascript 完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3181162/
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
Hide span (or div) until javascript completes
提问by Beau
I'm using the Unit PNG Fix (http://labs.unitinteractive.com/unitpngfix.php) to make a transparent png work in IE. It's being used on the background image of my logo container.
我正在使用 Unit PNG Fix ( http://labs.unitinteractive.com/unitpngfix.php) 在 IE 中制作透明的 png。它用于我的徽标容器的背景图像。
So I have my html, which contains these relative items. In the head:
所以我有我的 html，其中包含这些相关项目。在头部：
<!--[if lt IE 7]>
<script src="/assets/script_unitpngfix.js" type="text/javascript"></script>
<![endif]-->
Then in the body:
然后在体内：
<a href="index.html" style="display:block;"><span id="Logo"></span></a>
Since, the logo loads with a gray box around it before the Unit PNG Fix works its magic, how can I just hide the entire span until after the javascript is executed, so the user never sees the gray box?
因为，在 Unit PNG Fix 发挥其魔力之前，徽标周围会加载一个灰色框，我如何才能隐藏整个跨度直到执行 javascript 之后，这样用户就永远看不到灰色框了？
Thank you.
谢谢你。
回答by draganstankovic
Instead of your current span put this:
而不是你当前的跨度把这个：
<span id='Logo'
style="display:none"></span>
And then attach this function to the body onload event (<body onload = "showMySpan()">):
然后将此函数附加到主体 onload 事件 ( <body onload = "showMySpan()">)：
function showMySpan() {
var mySpan = document.getElementById('Logo');
mySpan.style.display = "";
}
回答by casablanca
Keep the spanhidden by default:
span默认保持隐藏：
<span id="Logo" style="display:none;"></span>
Then add a piece of JavaScript to show it later:
然后添加一段 JavaScript 以便稍后显示：
document.getElementById('Logo').style.display = 'inline';
The best way to ensure (at least in IE) that this piece of code is executed after the PNG Fix is to put it in a separate JS file and load it as a deferred script at the end of your page:
确保（至少在 IE 中）这段代码在 PNG Fix 之后执行的最佳方法是将其放在单独的 JS 文件中，并在页面末尾将其作为延迟脚本加载：
<script type="text/javascript" src="show_span.js" defer="defer"></script>
More details on deferred scripts: JavaScript: Defer Execution
有关延迟脚本的更多详细信息：JavaScript：延迟执行
回答by Bruno
You could use something like jQueryand its readyfunction, which is specifically designed to wait for the DOM to be loaded.
您可以使用jQuery及其就绪函数之类的东西，该函数专门用于等待加载 DOM。
The HTML would use display:noneto start with :
HTML 将用于display:none开头：
<span id="Logo" style="display:none;"></span>
Then, add a script like this (assuming you've linked to jQuery too):
然后，添加这样的脚本（假设您也链接到了 jQuery）：
<script>
$(document).ready(function () {
$("#Logo").show();
});
</script>
回答by Rodrigo Gama
I would go by using jquery, or other js framework and then using casablanca's solution in a 'document.ready' or something like it.
我会使用 jquery 或其他 js 框架，然后在“document.ready”或类似的东西中使用 casablanca 的解决方案。
It's never healthy to trust browser's loading time/order.
相信浏览器的加载时间/顺序永远不会健康。
