javascript - Jquery onClickでページの読み込みが遅いですか?

Question

jquery ajax ページの読み込みが少し遅いと思います。onClick ハンドラーで href をクリックすると、応答しないことがあり、ダブルクリックする必要がありますか? どうすればこれを回避できますか?

     <a target="_blank" class="arrow" href="javascript:void();" 
            onclick="f(\"value",\"value\");return false;">
                <div class="teaser">
                  <h3></h3>
                  <p class="subheadline"></p>
                  <hr class="divider">
                  <p></p>
                </div>
                <img height="353" class="img" src="example.jpg" width="374">
      </a>

空の h3 タグと p タグが原因でしょうか? ちょっと鈍い感じ？？

私の関数 f は次のとおりです。

function f (url, id)
{
  var btn = $(this);
  if (btn.data('running'))
     return;

   $j('#tx #singleview').empty();
   btn.data('running', true);

   url="http://"+url+"index.php?id="+id+"&eID=tx";
   url_stack.push(url);

   $j.getJSON(url, function(json) {

    $('#container').css({
      "z-index" : "-100",
      "margin-left" : "148",
      "top" : "-800"      
    })

   $('#container').animate({
      "opacity": "0.0",
      "top": '+=800'
    }, 900, function() {
      // Animation complete.
    });

   var singleview = $j('#tx #singleview');
   singleview.css({
     "position": "relative",
     "top": "-800px",
     "height": "800px"
   })
   singleview.append($j("#singleviewTemplate").tmpl(json).css({
     "visibility": "visible",
     "position": "relative"
     }));
   singleview.animate({
     opacity: 100.0,
     top: 0
   }, 900, function() {
     // Unset it here, this lets the button be clickable again
     btn.data('running', false);
   });      
 });
}

score 0 · Accepted Answer

何時間もの実験の後、私はそれを少しスピードアップすることができました:

アニメーションが終了したら、後で ajax getjson の読み込みを開始しています。

多くの Jquery animate css append 関数をまとめました

function singleview (url, id)
{
var btn = $(this);
if (btn.data('running'))
  return;

var c = $('#container');
var s = $j('#tx #singleview');

s.empty();
btn.data('running', true);

url="http://"+url+"index.php?id="+id+"&eID=tx";

if (url_stack.length == 0 && url_back.length > 0)
{
  bak = url_back.pop();
  url_stack.push(bak);
  url_back.push(bak);
  url_stack.push(url);
} else
{
  url_stack.push(url);  
}

c.css({
  "z-index" : "-100",
  "position": "absolute",
  "left" : "140px",
  "top" : "0px"
}).animate({
  "position": "relative",
  "opacity": "0.0",
  "top": "+=600px",
  "left" : "140px"
}, 900, function() {
  // Animation complete.
  $j.getJSON(url, function(json)
  {
    s.css({
      "position": "absolute",
      "top": "-600px",
      "height": "600px",
      "left" : "140px"
    }).animate({
      "opacity": "100.0",
      "top": "10px",
      "left" : "140px"
    }, 900, function() {
      // Unset it here, this lets the button be clickable again
      btn.data('running', false);
    }).append($j("#singleviewTemplate").tmpl(json).css({
      "visibility": "visible",
      "position": "relative"
    }));
 });      
});

}

score 0 · Accepted Answer

サーバーからの応答時間を確認するには、または何か他のものを使用する必要FireBugがありますが、TYPO3 であることを指定して質問を開始する必要があります。

ベアeIDは場合によっては、最も単純な出力をレンダリングするのに約 700 ミリ秒を消費することがあります (「ベア」単語のアクセント)。拡張機能に DB からの大量のデータと、joins非常に単純な結果セットをレンダリングするいくつかのテーブルがある場合、非常に遅くなる可能性があります。もちろん改善することはできますが、まず問題がどこにあるのかを特定する必要があります。

前回は、わずか 5,000 レコードからのページ化された結果が、JS グリッドのページあたり 50 アイテムのソート済みアイテムをレンダリングするのに約 30 秒かかるという問題がありました (ショック)。それは間違いなくTYPO3拡張機能の間違ったクエリに関するもので、AJAX は待つだけでした。最初にそこを検索する必要があると思います。

編集：

それが TYPO3 側に長い時間がかかっていることを確認するには、static fileいくつかのサンプルデータセット (TYPO3 から予想されるものと同様) を含むものも作成し、それがどのように動作するかを確認する必要があります。

javascript - Jquery onClickでページの読み込みが遅いですか?

2 に答える 2

Related

Reference