Question

IE诅咒我的醇厚......

我不想在jquery显示之前显示我的页面的jquery控制的内容。但是在Internet Explorer 7和8中，内容在jquery接管之前闪烁进入视图。我已经尝试了$（window）.load和$（document）.ready函数，但我仍然遇到同样的问题。

具体来说，我不希望我的文字出现，直到Cufon显示它，我不希望我的页面#field显示，直到弯曲的角落圆角。此外，我有jquery循环幻灯片，幻灯片的所有内容都会一次显示。

一个解决方案，但我并不是特别热衷于它，是让整个网页真的快速淡出：

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

即使时间设置为0ms，这仍然可以使所有隐藏的内容保持隐藏，直到jquery显示它。但不利的一面是，它们在页面之间导航时会使页面闪烁。（我正在玩这个持续时间，但是使用IE浏览器，它只会让页面变得更长 - 我从来没有，能够通过jquery获得任何淡入淡出的内容）。

以下是最受欢迎的页面：http：//ianmartinphotography.com/test-site/testimonials/index.html 关于顶级目录中的主要（主页）索引页面已启动并运行，我还在处理其他内容...谢谢！

Answer 1

您可以使用的一种技术是在＆lt; head＆gt;中添加以下内容：你的文件。

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

然后你可以使用CSS来确保在使用JavaScript显示元素之前确定隐藏元素

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

如果JavaScript由于某种原因不起作用，这也会优雅地降级。

Answer 2

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

或

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

将其设置为none，内联样式“display：none”或css文件

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

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

或第二次使用。

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

在http://jsfiddle.net/NtCKn/

上查看

Answer 3

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

Answer 4

尝试条件评论：

<!--[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关闭时的第一个）。

Answer 5

设置CSS样式显示：无;到Body或你的包装元素效果很好。请记住，当使用display：none;隐藏时，有些东西并不总是很好。在这些情况下，您可能需要使用visibility：hidden;然后将元素带回能见度：可见; fadeIn（）不适用于此，但解决方法是.hide（） - ＆gt;可见性：文件就绪后可见，然后是.fadeIn（）:(）

Answer 6

所以，我正在做我一直在做的事情，我在我的问题中提到的，只是让页面淡入jQuery，这让IE在显示我的Javascript之前只需要一小段时间就能完成它的行为 - 驱动的东西。我一直在用：

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

......并将继续这样做。 @alex在他的回答中提供了一个解决方案，让所有的html淡入。这也可能有用，（我没有专门针对问题的页面进行测试，但我仍然更喜欢我更加本地化的淡入淡出，因为他的方法可以实现一切淡入，包括背景颜色。我可以看到在另一个网站上真的很酷，但在我的网站上看起来不太合适......）

@Marc B在我的问题评论中提出了一个非常优雅的解决方案。我已经邀请他重申它作为答案，如果它有效（并且在此期间没有人提供更好的主意，）我会绿色检查他。（我认为它会起作用 - 下次我在我的Windows机器前试试吧......）

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

Answer 7

@Marc B值得赞扬;我等了三天，所以他可以发布自己的答案版本，这样我就可以对他进行绿色检查。

这是经过验证的最终代码：

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

非常简单有效。

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

7 个答案: