jquery/noscript淡入淡出页面

这对于可访问性如何？我正在寻找一个（合理的）防弹解决方案，在隐藏它之前不会显示内容的闪光。我试着在这篇文章上接受的解决方案（How to fade in an entire web page -- accessibly），它似乎运作良好 - 我失踪的任何东西？除了文档类型和字符集等jquery/noscript淡入淡出页面

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script> 
     $(window).load(function() { 
      $('.hidden').fadeTo(2000, 1); 
     }); 
    </script> 
    <style> 
     .hidden { opacity:0; } 
     body > div { background:#ccc; position:absolute; top:20%; right:20%; bottom:20%; left:20%; padding:20px; } 
    </style> 
</head> 
<body> 
    <script>$("body").addClass("hidden");</script> 
    <div>hello world</div> 
</body> 
</html>

来源

2017-04-19 dave25

这解决方案是从2011年，这个时代，你也许可以处理与CSS3渐变过渡。 https://jsfiddle.net/px9gjdc4/

CSS

body { 
    opacity: 0; /* start hidden, no flash of content */ 
    transition: opacity 2s; /* transition the opacity property */ 
} 

body.reveal { 
    opacity: 1; 
}

HTML

<body> 
    <script> 
    $(function(){ 
     $(window).load(function(){ 
     // add this class once page content has loaded 
     $('body').addClass('reveal'); 
     }); 
    }); 
    </script> 
    ... 
</body>

编辑：如果你担心JS被禁用，您可以用动画去纯 CSS3方法。 https://jsfiddle.net/px9gjdc4/2/

CSS

body { 
    opacity: 0; /* start hidden, no flash of content */ 
    animation-name: reveal; 
    animation-duration: 3s; 
    animation-fill-mode: forwards; 
} 

@keyframes reveal { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
}

HTML

<body>...</body>

唯一的缺点是，页面不能保证被正在衰落的时间完全加载。可能是值得添加一个animation-delay属性到您的CSS来降低风险。

来源

2017-04-19 17:38:14 SteamDev

我的担心是所有的“假设” - 如果他们禁用了javascript，那么显示永远不会被添加为类，所以他们从来没有看到任何东西？这就是为什么我在的顶部添加了隐藏在脚本中的类 – dave25

jquery/noscript淡入淡出页面

回答

相关问题