0

嗨，我想在网站上使用淡入效果，以便在页面完成加载时淡入内容。

原因是因为一些绝对定位的元素首先加载的东西在较慢的连接上看起来有点混乱，直到一切都开始了。

所以我在这里找到了一些可以很好地完成工作的代码，这里是：

HTML

<body id="main-content">

CSS

#main-content { 
    display: none;
}

脚本

$(document).ready(function() {
    $('#main-content').fadeIn();
});

这几乎正​​是我想要的，但我的困境是这样的；是否有任何情况下 jQuery 不会触发并且 body css 仍设置为不显示？

我是一个完整的 jQuery 新手，所以不知道这是否会发生，我知道它是一个远程库，所以我认为它不需要安装在像 Java 这样的浏览器中，但这就是我所知道的。

提前感谢您的帮助。

4

4 回答 4

2

您正面临 FOUC（无样式内容的闪烁）。您可以利用<noscript>来保护您的页面免受 js-disabled 客户端的影响：

<noscript>
<style type="text/css">
#main-content {display: block}
</style>
</noscript>

也请参阅此讨论。

于 2013-06-14T12:20:46.517 回答
0

禁用 javascript 的人不会看到您的页面，但这些应该只是您所有访问者的一小部分。

我将创建另一个带有警告“启用 javascript 以查看此网站”的 div，并使用 jQuery 删除此 div。

$(document).ready(function() {
    $('#warning').remove();
    $('#main-content').fadeIn();
});
于 2013-06-14T12:13:23.257 回答
0

是的，如果 JavaScript 被禁用，那么用户将看不到您的页面。

你可以这样做：

<body>
    <div id='mainContent> ... </div>
    <noscript> (alternate page for people with JS disabled) </noscript>
</body>
于 2013-06-14T12:14:41.063 回答
0

您可以使用 css3 动画，不支持的浏览器只会显示页面而不会淡入。

@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#main-content {
  /*run the animation only once*/
  -webkit-animation: fadeIn ease-in 1; 
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;

  /*Stay at end of animation*/
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  /*Length of animation*/
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}

示例 - http://jsfiddle.net/gpfVJ/

于 2013-06-14T12:24:46.657 回答