クライアントサイドスクリプトの実行中にGIFイメージを表示する

Question

重いjQueryコードがあります。すべてがクライアントにプリロードされ、jQueryでソートされます。

$('.acc_trigger').hide(); 
$('#taxonomylist ul li').each(function() { 
    $href = $("a", this).attr("href"); 
    if (!$href.match(/^.*\/activity\/.*[a-z,A-Z]$/i)) { 
     $(this).hide(); 
    } 
}); 
$('#taxonomylist ul li a').click(function() { 
    $href = $(this).attr("href"); 
    $('.acc_trigger').hide(); 
    $regex = new RegExp("^" + $href + "+$"); 

    $('div.taxonomy ul li').each(function() { 
     $href_taxonomy = $("a", this).attr("href"); 
     if ($href_taxonomy == $href) { 
      $(this).parents().filter('.views-field-webform-form-body').prev().show(); 
     } 
    }); 

    $('#taxonomylist ul li').each(function() { 
     $href_sub = $("a", this).attr("href"); 
     if (!$href_sub.match($regex)) { 
      $(this).show(); 
     } 
    }); 

    return false; 
}); 

JavaScriptコードが動作しているときに画像を表示する方法を教えてください。あるいは、私のコードで改善できる何かが見えますか？

Answer 1

このjQueryが何を操作しているか分からずに、改善を提案するのは難しいです。

しかし、すべてのデータをロードしているときに、データがロードされると、それを覆うように、ローディングアイコンをバックグラウンドイメージとして配置しています。

Answer 2

jQueryの作業を開始する前にロードイメージを表示し、終了後に非表示にします。

Ajaxを使用しているときのようなイベントはないと思います。

Answer 3

ブラウザでのJavaScriptの実行、ページのレンダリング、およびペイントのパイプラインは、（HTML5 Webワーカーを数えない限り）シングルスレッドです。つまり、CPUが十分に集中しているJavaScriptを実行すると、アニメーション化されたGIF画像のアニメーションが停止します。その周りの唯一の方法は、あなたのコードを最適化することです。場合によっては、実行呼び出しスタックをsetTimeoutsで中断します。