条件付きで表示/非表示できる領域 (div、スパン) を含む html レイアウトを生成したいと考えています。これらの領域はデフォルトで非表示になっています。
document.ready で jquery を使用して .hide() メソッドを呼び出すと、これらの領域が点滅することがあります (ブラウザは部分的に読み込まれたドキュメントをレンダリングします)。そこで、html レイアウトに「display: none」スタイルを適用します。
「display:none」を適用するとカプセル化ルールが破られるため、まばたきを避けるためのベストプラクティスは何だろうか. jquery の非表示/表示の実装がいつか変更されると、サイト全体が機能しなくなります。
前もって感謝します
@アンドリュー、
答えがすでに受け入れられていることは知っていますが、display: none;Javascript を使用していないユーザーにとっては悪夢になるでしょう。
インライン Javascript を使用すると、点滅することなく要素を非表示にすることができます。Javascript を使用していないユーザーは引き続き表示できます。
ページの読み込み時に非表示にする必要があるいくつかの div を検討してください。
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
<div id="hide-me">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me").hide();
</script>
<div id="hide-me-too">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me-too").hide();
</script>
</body>
インライン Javascript は、要素がレンダリングされるとすぐに実行されるため、ユーザーから隠されます。
私はボリス・ゲリーに同意します。これはオーバーエンジニアリングではなく、むしろ標準的なベスト プラクティスです。ボリスとは少し異なる方法で、最初に no-js クラスを html に追加し、次に JavaScript で削除します。
この方法では、ドキュメントがコンテンツを非表示にする準備が整うのを待つ必要がなく、JavaScript がなくてもコンテンツが表示されます。ユーザーが JavaScript を持っていないと仮定することは、プログレッシブ エンハンスメントの哲学に沿ったものです。
元：
<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>
私のCSS：
#foo {
display: none;
}
html.no-js #foo {
display: block;
}
とジャバスクリプト
$(document).ready(
function()
{
$('html').removeClass('no-js');
}
);
********* またはケースごとに************
元：
<div class="no-js" id="foo">foobar and stuff</div>
CSS:
.no-js {
display:none;
}
#foo {
display: block;
}
#foo.no-js {
display: none;
}
js:
$(document).ready(function(){
// remove the class from any element that has it.
$('.no-js').removeClass('no-js');
});
私は通常、JavaScript が有効になっているときに適切なプロパティを設定するために、.js クラスを要素に設定します。
次に、javascript が存在するかどうかに応じて CSS を設定できます。
元：
<html class="js">
<body>
<div id="foo"></div>
</body>
</html>
私のCSS：
html.js #foo
{
display: none;
}
とジャバスクリプト
$(document).ready(
function()
{
$(html).addClass('js');
}
);
特に要素を css クラスにカプセル化する場合は、要素の初期表示プロパティを設定することにまったく問題はありません。
なぜこれをしないのですか?:
// Hide HTML element ASAP
$('html').hide();
// DOM-ready function
$(function () {
// Do stuff with the DOM, if needed
// ...
// Show HTML element
$('html').show();
}
うまくいきそうです！
よろしく。
私も特に IE でこれに苦労しましたが、これが非常に役立つことがわかりました。 -javascript-support-is-available/
しばらく考えた後、次の解決策を思いつきました。私の他のソリューションと比較して、私はそれを本質的な部分に減らしました（そしてこれを使用してJSでクラスを追加しました）：
<html>
<head>
<style>
/* This could be also part of an css file: */
.container-with-hidden-elements .element {
display: none;
}
</style>
</head>
<body>
<div class="container">
<script>
document.getElementsByClassName('container')[0]
.className += ' container-with-hidden-elements';
</script>
<div class="element">Content that should be initially hidden if possible.</div>
</div>
</body>
</html>
script タグはすぐに実行され、コンテナにクラスを追加します。このコンテナ内には、ネストされた要素がいくつかあります。これは、コンテナが特別なクラスを持ち、有効になった CSS ルールがあるためです。
繰り返しますが、これは残りの html が処理される前に発生します (点滅を防ぎます)。また、JS が無効になっている場合、すべての要素がデフォルトで表示されます。プログレッシブ エンハンスメントと呼ばれるものです。
これがすべてのブラウザで機能するかどうかはわかりません。しかし、IMOはシンプルできちんとしたソリューションです。
CSS クラスで「display: none」を適用できます。
JavaScript が要素を見つけるために、ブラウザーが HTML コードを読み取る必要があるためです。ブラウザが HTML を読み取るため、要素を非表示にする必要があります。
JavaScript に HTML を挿入することもできますが、レンダリングする前に hide を呼び出すこともできます。
これが私の提案です。このソリューションを利用して、新しい CSS ルールを作成します。主なこと: JS が利用可能な場合は一部の html を非表示にする CSS クラスが作成されますが、そうでない場合は作成されません。そして、これはメイン コンテンツ (最初は非表示にする必要がある html パーツを含む) が処理される前に発生します!
<html>
<head>
<style>
/* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...)
gets loaded with such a class this would be also overwritten. This solution does
not require the class. It is here just to show that it has no effect
if JS is activated.*/
.hidden {
display: block;
background: red;
}
</style>
<script>
// this is copied from the linked stackoverflow reply:
function setStyle(cssText) {
var sheet = document.createElement('style');
sheet.type = 'text/css';
/* Optional */
window.customSheet = sheet;
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
return (setStyle = function (cssText, node) {
if (!node || node.parentNode !== sheet)
return sheet.appendChild(document.createTextNode(cssText));
node.nodeValue = cssText;
return node;
})(cssText);
}
// And now: This class only gets defined if JS is enabled. Otherwise
// it will not be created/overwritten.
setStyle('.hidden { display: none; }');
// Attention: Now that the class is defined it could be overwritten
// in other CSS declarations (in style tags or with loaded CSS files).
</script>
</head>
<body>
<button>Show/Hide</button>
<div class="">before</div>
<div class="my-element hidden">
Content that should be initially hidden if possible.
You may want to multiply this div by some thousands
so that you see the effect. With and without JS enabled.
</div>
<div class="">after</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
// Here is some 'normal' JS code. Very likely loaded as a JS file:
$('button').click(function () {
$('.my-element').toggleClass('hidden');
// or setting display directly:
// $('.my-element').toggle()
// but well, having class hidden though it is not
// hidden makes is not so nice...
})
</script>
</body>
</html>
もう少し複雑ですが、これが適切な解決策だと思います。利点は、ちらつきが防止され、JS が有効になっていない場合に機能することです。また、jQuery は必要ありません。
私がいつもしているのは、空の div を作成することです。そして、そのコンポーネント内のデータを表示する必要がある場合は、$.ajax() を使用してデータ (つまり html) を非同期的にロードします。
余分なライブラリは必要ありません。
これを処理するには、常に Modernizr.js http://modernizr.com/を使用します。
Mondernizr では、クラス「js」または「no-js」がページの HTML タグに追加されます。
ここから、html タグに js クラスがある場合にのみ要素を非表示にできます。
Modernizr は他の多くのアプリケーションに最適であり、これまでに使用したことがない場合は読む価値があります: http://modernizr.com/docs/