1

私が開発したいくつかの Web サイトでは、ページが読み込まれるとコンテンツのスライドイン/フェードイン アニメーションが表示されます。そのためにjQueryを使用しますが、アニメーションの前にコンテンツを非表示にする必要があります。最初にこれを達成するために、css ルールを使用しました#content{display:none}。次に、JavaScript ブロックのページ ヘッダーで<script type="text/javascript"> $(function() { $('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){ $('#loading').fadeOut(); ...

よくわかると、ページが読み込まれるとjQueryコードが実行され、このようにうまく動作しますが、1つ問題があります。ユーザーが JavaScript をサポートしていない場合、CSS コンテンツで非表示になっているため、ページは空白のままになります。また、Google ウェブマスター ツールは、おそらく javascript(jQuery) コードを実行しないため、空白のページ プレビューを表示します。また、同じ CSS ルールのために、Safari Web ブラウザのトップ サイト ページにも空白のページ プレビューが表示されます。したがって、JavaScript 以外のブラウザーを完全にサポートするために、CSS ルールを削除し、代わりに JavaScript コードを使用してコンテンツを非表示にしました。<script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script>JavaScript をサポートしているユーザー向けですが、この方法では、インターネット接続が遅すぎる場合、最初に通常のページのようにコンテンツが読み込まれ、読み込まれるとブラウザによって非表示になり、アニメーションが実行されます。この方法では、アニメーションがユーザー エクスペリエンスを改善するのではなく、邪魔になるため、これは面倒です。ページを読み始めると、突然ページが消えてスライドインします... 結果はこちらでご覧いただけます - http://sky-camp.com/en/paragliding-courses.html

何が恋しいですか？jQuery プラグインが読み込まれる前にコンテンツを非表示にしようとするために、jQuery の代わりにコンテンツ非表示に JavaScript を使用しますが、期待どおりに動作しません。

4

3 に答える 3

0

頭の中で次のようにしてみてください。

<script>document.write('<style>#content{display:none;}</style>');</script>

久しく使っていませんが、よく使っていました。

于 2013-08-07T21:58:39.200 に答える
0 
<code>
$( function(){$('#content').css("display","none"); });
</code>

ページが完全に充電されたとき:

<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>
于 2013-08-07T21:59:00.630 に答える
0

これは私の意見です...

しかし、JavaScript を無効にする人々に対して、私は実際に準備をしているわけではありません。誰かがすでに言ったように、誰がまだそれをしているのですか? もし彼らがそこにいたら、ウェブの経験はひどいものになるでしょう. その機能全体をバイパスしてコンテンツのみを表示する noscript タグを追加してみませんか。そのため、JS を使用せずにサイトにアクセスした場合でも、通常どおりページが表示されます。

人々が投稿しているすべての提案はひどく下品であり、良い習慣とは言えません。

于 2013-08-07T23:41:05.367 に答える