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淡入淡出頁面

回答

相關問題