以下示例中,我使用jQuery,但我的问题通常适用于任何在JavaScript用于显示如果未启用JavaScript将会错过某些功能的情况。
假设我想要在页面加载时淡入一些文本:
.fade-in { opacity:0; }
<div class="fade-in">FOOBAR</div>
$('.fade-in').fadeIn();
但是如果客户端没有启用JavaScript怎么办?我不想文本保持不可见,所以也许我可以将CSS设置为结束状态作为后备方案,然后在动画之前使用JavaScript取消设置。这样,没有启用JavaScript的用户只能看到普通文本(没有淡入效果),而启用JS的用户则可以看到淡入效果。
.fade-in { opacity:1; }
<div class="fade-in">FOOBAR</div>
$('.fade-in').css('opacity', 0);
$('.fade-in').fadeIn();
这样做虽然可行,但大多数情况下会出现CSS显示属性被设置和javascript取消设置之间的不愉快的"闪烁"现象。在上面的示例中,正常工作的javascript用户将看到"FOOBAR"出现了一瞬间,然后消失,然后淡入。
有没有最佳实践可以避免这种闪烁或者不牺牲无JS用户?请不要纠缠于上面的微不足道的例子,那只是为了演示概念。我正在寻找一个更广泛的处理这些情况的策略。此外,我不想辩论渐进增强的优点或是否有必要支持无JS用户。这是另一个主题的问题。
更新:我知道像Modernizr这样的工具可以用来添加.no-js类等,但我更喜欢不依赖这些库的解决方案。
$(document).ready(...)
中运行动画。根据我的经验,在ready()
内部的代码有机会覆盖 CSS 之前,CSS 通常会短暂地出现。 - emersonthis.ready()
没有使用DOMContentLoaded
,否则它应该在加载CSS之前运行。 - Dissident Rage$(document).load()
,它会更早地触发。 - emersonthisDOMContentLoaded
,而是使用了document.oncontentready
,它比DOMContentLoaded
慢但比window.onload
快。 - Dissident Rage