2

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 在 IE 中淡入淡出）。

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

4

7 回答 7

1

您可以利用的一种技术是在文档的 <head> 中添加以下内容。

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

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

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

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

于 2011-02-10T19:16:55.773 回答
1 
<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/

于 2011-02-10T19:41:56.507 回答
0

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

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

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

非常简单有效。

于 2011-02-17T01:31:55.863 回答
0

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

于 2011-02-10T19:16:17.010 回答
0

尝试条件注释：

<!--[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 关闭）。

于 2011-02-10T19:17:45.313 回答
0

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

于 2011-02-10T19:44:41.893 回答
0

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

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

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

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

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

于 2011-02-13T18:07:16.873 回答