ondomready JavaScriptサポートを有効にする代替ソリューション

ページが完全に読み込まれる前にDOMを操作できるJavaScriptフレームワークが多数あります。ユーザーのエージェントにJavaScriptがサポートされているかどうかを判断するためにhtmlタグやbodyタグが操作されることがよくあります。ondomready JavaScriptサポートを有効にする代替ソリューション

たとえば、htmlタグのクラスは「no-js」になり、DOMの準備ができたらそのクラス名は「js」に更新され、フロントエンドの開発者はJavaScriptがサポートされている場合と、JavaScriptがサポートされていない場合にデータを正しく表示する方法の2つの方法があります。

これはうまくいきますが、常に少しの遅れがあり、更新されたクラス命名関数が実行されたときに（ 'no-js'から 'js'に）画面ジャンプが頻繁に見られます。 JSでサポートされているバージョンのサイトに異なるスタイリングが適用されています。

これはいつも私を悩ませています。ページ上に多くのJavaScriptベースのインタラクティブ機能があると、実際には醜いように見えます。

短いストーリーで、私の意図は、これをondomreadyイベントより速く行う解決策を見つけることでした。私が思いついた解決策は、開始ボディタグの直後に次の文を実行することでした。

<script type="text/javascript">//<![CDATA[ 
var elBody = document.getElementsByTagName('body')[0]; 
elBody.className = elBody.className.replace(new RegExp('no-js\\b'), 'js');//]]></script>

これはうまくいくようです。これ以上の画面ジャンプはありません。これは大丈夫ですか？私が気付いていないすべての短所？

出典

2011-02-10 Mike

私はまた、開幕<body>タグの後でできるだけ早くスクリプトを実行します。これは、これが最適な場所だと思われます。私には1つの提案しかありません。この小さなスクリプトは、正規表現の必要性を避ければ、より速く実行できます。

<body> 
<script type="text/javascript">document.getElementsByTagName('body')[0].className='js';</script>

その後、あなたは、デフォルトでは非JavaScriptの状況のためのページのスタイルを設定し、jsクラスを使用して強化することができます。おそらく、このような何かを簡素化します。たとえば：セレクタ#signin-formは.no-js #signin-formよりも高速に実行されますので、

は

/* Base styles for signin form, displayed inline on page */ 
#signin-form{ 
background: #fff; 
color: #333; 
/* ...other pretty form styles... */ 
} 

/* JS enhanced floating signin form */ 
.js #signin-form{ 
display: none;/* removes form from DOM and shown by JavaScript */ 
position: absolute; 
top: 0; 
right: 1em; 
}

、ここにもCSSのレンダリングという利点があります。

希望すると便利です。

出典

2011-03-24 11:43:54 dotjay

ondomready JavaScriptサポートを有効にする代替ソリューション

答えて

関連する問題