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 回答