在 IE 中隐藏页面内容，直到脚本完全加载到 jquery 中答案

【问题标题】：Hide content of page in IE until scripts are totally loaded in jquery在 IE 中隐藏页面内容，直到脚本完全加载到 jquery 中
【发布时间】：2011-02-10 19:13:37
【问题描述】：

IE 刺痛我的醇厚...

我不希望我的页面的 jquery 控制的内容在 jquery 显示之前显示。但在 Internet Explorer 7 和 8 中，内容会在 jquery 接管之前闪烁显示。我已经尝试过 $(window).load 和 $(document).ready 函数，但我仍然遇到同样的问题。

具体来说，我不希望我的文本在 Cufon 显示之前出现，并且我不希望我的页面 #field 显示直到弯曲的角落已经圆润了角落。此外，我有 jquery 循环幻灯片，并且幻灯片的所有内容都一次短暂地显示。

一个解决方案，但我不是特别热衷于它，是让整个该死的页面快速淡入：

$(window).load(function(){$("#field").fadeIn(0);});

即使时间设置为 0 毫秒，这仍然可以使所有隐藏的内容保持隐藏，直到 jquery 显示它。但缺点是它使页面在它们之间导航时闪烁。（我正在玩持续时间，但使用 IE，它只会让页面空白更长 - 我从来没有能够使用 jquery 在 IE 中淡入淡出）。

这里是涉及最多的页面：http://ianmartinphotography.com/test-site/testimonials/index.html About 和顶级目录中的主（主）索引页面已启动并正在运行，我仍在处理其他内容...谢谢！

【问题讨论】：

在你的主css中设置一个body { display: none }，然后让jquery在onload处理程序中做{display: block}？
没有人提供令人满意的答案，只是我已经在做的事情有所不同......@Marc，你的解决方案可能是最好的，可能比我现在正在做的淡入更优雅.建议将其作为答案，如果我对其进行测试并且它有效，我将对其进行绿色检查，除非同时有人有更好的想法......
+1 表示“IE 让我的醇厚...”

标签： jquery cufon jquery-cycle

【解决方案1】：

您可以利用的一种技术是在文档的

中添加以下内容。

<script>
document.documentElement.className = "js";
</script>

然后您可以使用 CSS 确保元素在使用 JavaScript 显示之前被明确隐藏

.js .some-element {display: none;}

如果 JavaScript 由于某种原因无法正常工作，这也会优雅地降级。

【讨论】：

哇——真优雅——我试试看。
我设置正确了吗？ ianmartinphotography.com/test-site/about/index-alt-01.html
你已经添加了两次 JavaScript，除此之外，它正在工作，只要确保你的 CSS 选择器是正确的。
抱歉@Daniel，我的任务还是不行......在Cufon接管之前，底层字体仍然会闪烁......

【解决方案2】：

<html lang="en" class="hideshow">

或

<html lang="en" style="display:none">

将其设置为不显示，无论是内联样式“display:none”还是在您的 css 文件中

您的问题标签中有 jquery，所以我假设您使用的是 jquery。如果是这样，您可以将其放入您的文档准备功能中

$(function(){
$('.hideshow').fadeIn("slow").show();
});

或用于第二个用途。

$(function(){
$('html').fadeIn("slow").show();
});

查看http://jsfiddle.net/NtCKn/

【讨论】：

没关系，只要你所有的调用都在读取函数$(function(){...})内完成。对于 cufon，只需将 Cufon.replace('h1') 放在 ready 函数中。这样，所有字体 h1 标签在页面加载之前呈现，你可以对角插件做同样的事情
@ian_6500 如果这对您有用，请考虑接受答案。
我认为你有一个很酷的技巧，但它使我的背景颜色也淡化，我不太喜欢。基本上，它与我在问题中提到的当前使用的修复相同，但我的被隔离到一个特定的 div 而不是整个页面......我也许可以在其他地方使用你的技巧，所以我对你的代表进行投票，但作为我的问题的解决方案，它是横向移动...但是感谢您的努力！

【解决方案3】：

是否可以使用 display:none; 设置相关元素的样式？或可见性：隐藏；使用 CSS，然后在页面加载时使用 jQuery 显示这些元素？

【讨论】：

当然，这是使用 jquery 让内容淡入淡出的常用练习，它适用于我尝试过的所有浏览器，但 IE...

【解决方案4】：

设置 CSS 样式显示：无；到 Body 或您的包装器元素效果很好。请记住，当使用 display: none; 隐藏时，有些东西并不总是能很好地呈现。在这些情况下，您可能需要使用可见性：隐藏；然后以可见性将元素带回视线：可见； fadeIn() 对此不起作用，但解决方法是 .hide() -> visibility: visible ，然后在文档准备好后 .fadeIn() :)

【讨论】：

【解决方案5】：

尝试条件 cmets：

<!--[if IE]>
  <style>
    body {
     display: none;
    }
  </style>
<![endif]-->

和onload，通过脚本删除这个：

<script>
  $(window).load(function(){$('body').css('display:block');});
</script>

如果你想要在浏览器是 IE 并且 JS 关闭时的功能（渐进增强是好的），第一个代码块会稍微复杂一些：

<head>
<!--[if IE]>
  <style>
    body {
     display: none;
    }
  </style>
  <noscript>
    <style>
     body {
       display: block !important;
     }
    </style>
  </noscript>
<![endif]-->

这将隐藏正文，但仅在 JS 开启时（因为第二个 style 块将覆盖第一个块，以防 JS 关闭）。

【讨论】：

嗯......我是否正确地实现了@Piskvor？ ianmartinphotography.com/test-site/about/index-alt.html
@ian_6500：嗯，不，我不这么认为： 相同。如果您使用的是普通的 HTML cmets，则需要将它们与条件 cmets 分开，尽管它们的语法相似。请注意，我在帖子中也打错了字——应该是<!--[if IE]>——我错过了结尾>；抱歉，现在修好了。
@Piskvor：谢谢！它似乎确实检测到了 IE，但现在 IE 中什么也没有显示，其他浏览器也可以工作......你能告诉我我做错了什么吗？
@ian_6500：我错过了JS部分的结束);；也许那会引发错误（现在在我的帖子中修复）？另外，你似乎有一个onload=preloadImages()，但没有function preloadImages。
@ Piskvor 嗯...仍然不高兴，但它现在确实出现在 IE 中，但同样的原始问题仍然存在...您能再检查一下我的代码吗？

【解决方案6】：

所以，我只是在做我一直在做的事情，我在我的问题中提到的，只是让页面用 jQuery 淡入，这让 IE 在显示我的 Javascript 之前有几分之一秒的时间来完成它的动作-驱动的东西。我一直在使用：

$(window).load(function(){$("THE DIV CONTAINING MY PAGE").fadeIn(0);});

...并将继续这样做。 @alex 在他的回答中提供了一个解决方案，让所有的 html 淡入。这也可能有效，（我没有在相关页面上专门测试过它，但我仍然更喜欢我更本地化的淡入，因为他的方法使一切淡入，包括背景颜色。我可以看到在另一个网站上真的很酷，但在这个网站上这种外观不太适合我...）

@Marc B 在我的问题下的评论中提出了一个非常优雅的解决方案。我已邀请他重申它作为答案，如果它有效（同时没有人提供更好的想法，）我会绿色检查他。（我认为它会起作用——下次我在我的 Windows 机器前时会尝试一下......）

如果其他人有任何其他想法，我很乐意看到他们！

【讨论】：

【解决方案7】：

@Marc B 值得称赞；我等了三天，这样他就可以发布他自己版本的答案，这样我就可以给他绿色检查了。

这是经过测试的最终代码：

<script type="text/javascript">
 $(document).ready(function(){
 $("THE DIV CONTAINING MY PAGE").css('display', 'block');
 });
</script>

非常简单有效。

【讨论】：

不要忘记在 DIV CONTAINING MY PAGE 的 CSS 中添加 display:none。
我敢打赌这也适用于 Hussein 的 HTML 显示：也没有任何技巧。
很高兴它对你有用。这与我在下面提供的概念相同。