1

一般的で漠然とした質問で申し訳ありませんが、最近気になっています。

現在、ホバーすると画像が変化するいくつかのボタンを使用しています（いくつかのサイトで）。微妙で背景色が変化するもの、CSS 疑似クラスが画像全体をホバーするもの、jQuery hover メソッドを使用するものがあります。特定のものには異なる戦術が必要なようです。しかし、これらを全体的に見ると、私はあまり一貫した方法を使用していなかったようです。

私の質問は、ページを最速にし、一貫性を保つために、一般的にこれを行うための最良の方法は何ですか? 問題なく動作しますが、CSS ファイルで画像を多数呼び出すことはベスト プラクティスではないようです。たぶん私は間違っています。

しかし、多くの jQuery スクリプトを実行している場合、それも禁忌のようです。他のサイトを見てみると、 で*.js実行されているスクリプトよりも多くのファイルがあるようです<head>。たとえば、現在、ほとんどの jQuery スクリプトを含むヘッダー ファイルがあります。<head>これを行うのは、これらのスクリプトをタグに保持するように常に教えられたからです。たとえば、読みやすくするためにスクリプトを HTML コードの近くに追加したほうがよいでしょうか?

JavaScript を独自のファイルに移動して、<head>. 私のページは比較的うまく機能していますが、この現象のフレームワークがあるとは言えません。これらのページをリファクタリングする前に、この種の作業の戦略を改善しようとしています。

ご意見をお寄せいただきありがとうございます。

4

3 に答える 3

2

head に js ファイルを含めないでください。RequireJSまたは head.js を使用して、js ファイルを非同期的にロードしてください。

フーバーには CSS のみを使用し、すべての画像をスプライトにマージすると、ページの読み込みが速くなります。

于 2012-10-26T16:01:58.063 に答える
1

css を使用してフェード効果を作成することもできます。異なる背景色の画像を使用している場合は、使用しないでください。CSS を使用すると、ホバー時に適切な背景色と効果を得ることができます。

<ul class="nav-fade">
   <li>Home</li>
   <li>Tutorials</li>
   <li>Articles</li>
</ul>

このメニューをフェードする CSS

.nav-fade li {
   background: #fff;
   padding: 3px 8px;
   display: inline-block;
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
   }

   .nav-fade li:hover {
      background: #ddd;
      }

ソース: http://bavotasan.com/2011/a-simple-fade-with-css3/

于 2012-10-26T16:04:31.740 に答える
1

ブラウザはそれらをキャッシュできるため、共通の機能を別.jsのファイルに配置する必要があります。代わりに、同じ js 関数を各 HTML ファイルにカット アンド ペーストすると、ブラウザはすべてのページで (少なくとも最初の読み込みで) ダウンロードする必要があります。また、メンテナンスがはるかに簡単になることは明らかです。

cssそして、少なくともユーザーが JavaScript を無効にしているときに機能するので、できる限り使用したいと思います(ブラウザーが実際にすべての最新の css 機能を実装していると仮定しますが、実装されていない可能性があります!)。

于 2012-10-26T15:58:54.583 に答える