1

私は大規模なウェブサイトで働いています(毎月500万以上のユニークヒット、約5500万から6000万ページのビュー/インプレッション)。

現在、ユーザビリティ(tabindex、labelsなど)を更新しています。

私はcssクラスとjQuery(以下のコードを参照)を使用して、フォームの送信時(およびajax関連の部分的なページの更新/更新など)でカーソルタイプを「progress」に変更し、ユーザーが「何か」が起こっていることを即座に認識できるようにします、クラス名「loadWait」を介して。

 //css class
   body.wait *, body.wait {
    cursor:progress !important;
   }

   //jQuery
   $(document).ready(function() { 
      $('.loadWait').click(function(){
         progerssCursor();
      });
   });
   function progerssCursor(){
    $('body').addClass('wait');
   }
   function removeProgerssCursor(){
    $('body').removeClass('wait');
   }

   //example html   
   <input type="sumbit" class="loadWait" />
   <a href="..." class="loadWait" />

   //in ajax requests by calling functions "progressCursor()" and 
"removeProgressCursor" at the appropriate time/place

したがって、質問は次のとおりです。

  1. この種のアプローチの既知の「副作用」はありますか?(グーグルで広範囲に検索しましたが、信じられないようなものは見つかりませんでした)。

  2. すべてのリンクにclass="loadWait"をアタッチする必要があるかどうかについて話し合っています(この状況でカーソルを変更したくないので、明らかにtarget = "_ blank"のリンクではありません)。あなたの考えは何ですか?私たちの推論は、何らかの理由(サーバーの負荷が高い、インターネット接続が遅いなど)で、ユーザーの「リンククリック」と実際のページのレンダリングが開始されるまでに数秒の奇妙な遅れが生じる可能性があるということです。ユーザーは、「何か」が発生していることを即座に知ることができます(タブの読み込みアイコンがそこにあることは認識していますが、ユーザーが見逃していることがよくあります)。あなたの考えは何ですか?私たちのすべてのリンクに対してこれを行うのはやり過ぎですか?(ここでは工数について話していません)。

  3. これが追加するページの読み込み時間(ある場合)の種類を知っている人はいますか?($('。loadWait')。click(function(){...はどのように機能しますか?jQueryは、ページの読み込み時にDOM全体を検査して「クリック」イベントを確認しますか、それとも「クリックごと」に基づいて一致するクラス名?)。

  4. これについて他に何か考えはありますか?

注:このコードは、IE6-9、FF3.6、FF11、FF12、Opera、Safari(Windows)、Chromeなどでテストされており、既知の/明らかなバグ/問題はありません。

4

1 に答える 1

1

#: で質問にお答えします。

  1. あなたがしていることに直接的な副作用はありません。ただし、JavaScript が無効になっているユーザーなど、どうしようもないシナリオがいくつかあります。そうは言っても、Chrome (少なくとも新しいバージョン) では、ページの読み込み時にカーソルが読み込みアイコンに自動的に変更されるため、この追加の JavaScript は Chrome ブラウザーには必要ありません。ただし、JavaScript を実行しているトラフィックの多いサイトでは、その JS が ajax 指向でない限り、心配する必要はありません (#2 を参照)。
  2. リンクのクリックにカスタムの読み込みインジケーターを追加しようとしている場合は、各リンクにクリック ハンドラーを追加するのが適切な方法です。JavaScript の良いところは、純粋にクライアント側であることです。そのため、ページの読み込みに時間がかかる場合でも、ユーザーが「loadWait」リンクをクリックすると、最初に JavaScript が起動され、ページが読み込まれるまで待機します。したがって、説明しているサーバーの負荷に基づいて、これは実際にリンクをクリックするアクションには影響しません。これは、作品がすべてクライアント側であるためです。
  3. JavaScript が本文の一番下にある限り (そうあるべきです)、JavaScript が実行される前にすべての HTML 要素が既に読み込まれているという意味で、ページの読み込み時間は影響を受けません。ただし、本当に心配な場合は、クリック イベントはそれほど負担の大きい jQuery 関数ではありませんが、他の jQuery 関数と同様に、過剰に使用すると最小限の遅延が発生する可能性があります。ただし、これが問題になるとは思えないので、心配する必要はありません。JS がページの下部にあることを確認してください。
  4. 簡単に #1 に戻ります: すべてのブラウザー固有の機能を調べて、どのブラウザー (Chrome など) が既にこの機能を提供しているかを判断できるようにしてください。

幸運を祈ります。これがお役に立てば幸いです。

編集:私が言及するのを忘れていたもう1つのこと。ページに JavaScript を動的にロードしている場合、.click イベントはその動的 JavaScript 内のどのリンクにも登録されません。これは、コード スニペットが $(document).ready で実行されていることを前提としています。$(window).load に移動すると、より適切になります。ただし、さらに優れたソリューションは、jQuery の .on 関数 (以前は .live) を利用することです。on 関数は動的 JavaScript もバインドできるようにしますが、定期的に動的 JavaScriptが大量にある場合、その JavaScript のパフォーマンスが低下する可能性があることに注意してください。

于 2012-09-07T15:44:53.820 に答える