ページを操作するjavascriptを持つサイトを作成し、この操作がページの読み込みで発生すると、しばしば厄介なフリッカー効果が発生します。ページのコンテンツが操作されているときにjavascriptがちらつくのを止めますか？
たとえば、アコーディオンがある場合は、フルコンテンツをhtmlとして読み込む必要があり、一度ロードするとjavascriptでラップすることができます。これは、コンテンツが一瞬表示され、その一部が隠されていると「ちらつき」することを意味します。
解決策の1つは、CSSでちらつきコンテンツを隠し、必要に応じてJavaScriptで表示することです。問題は、JavaScriptがない人にとってページが正しく動作しなくなることです。
良い方法がありますか？ ありがとう
：
<!doctype html>
...
<body>
<script>document.body.className='js';</script>
あなたはその後、JSが使用可能なときにコンテンツが隠されていたことを確認するために、いくつかのCSSルールを採用したいです、 何かのようなもの。
.js .accordion:nth-child(n+1) { display: none }
これは絶対に最適なソリューションです。 jQueryのready関数は、DOMが完全に準備されるまで待機します。要素を素早く実行したい場合は、これが私が考える方法です。 –
良い方法はdocument ready function in Jqueryを使用しています。
私はこれまで、通常のアプローチは、できるだけ早く体に「jsの」クラスを追加することだと思いますポール・アイルランドでthis excellent articleをチェックアウト - それはJS負荷までCSSで隠し、基本的にあなたが記述法の反転です。頭に<script>document.documentElement.className += 'js';</script>を追加することで、基本的にDOMの準備が整う前に非スタイル化されたコンテンツを隠すメリットを得ることができます。
ページが読み込まれた後でCSSプロパティを変更すると、このようなちらつきが発生します。 CSSを作る最善の方法は、JavaScriptがそれを操作するのと同じプロパティを持っています。このようにして、ブラウザで余分なリフロー/ペイントをスキップしてページを効率的にすることもできます。しかし、ハックはjavascriptを最小限に抑えて、あなたのCSSロードラインの前にロードすることです。
プログレッシブエンハンスメントを使用するこれを行うより良い方法はありません。ある時点で、ページ全体を読み込み、javascriptを使って見たくないものを隠す必要があります。しかし、javascriptは一度書かれたDOM上でしか実行できないため、非表示にする前に書き留めておく必要があります。それは直感に反しているようですが、そこに行きます。それはDOMを操作するために私たちが支払う代金です:-)
DOMが完全に準備が整う前でもJSを実行できます。 Searleaは以下の答えを持っています。 –
あなたのJavaScriptを初期化するのにどんな出来事がありますか？それはonLoadですか？ – rciq