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>

也许是因为empy 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);
   });      
 });
}

Answer 1

经过几个小时的实验，我能够加快速度：

我在动画结束后开始加载我的ajax getjson。

我已将许多Jquery animate css追加函数合并在一起

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"
    }));
 });      
});

}

Answer 2

您应该使用FireBug或其他内容来检查服务器的响应时间，但绝对应该通过指定TYPO3开始提问。

在某些情况下，裸eID可以消耗大约700毫秒来渲染最简单的输出（重写'裸'字）。如果在你的扩展中你有很多来自DB +的数据，那么表joins呈现非常简单的结果集可能会非常慢。它当然可以改进，但首先你必须确定问题所在的位置。

我们上次遇到这样的问题，只有5k记录的分页结果需要~30秒来渲染JS网格（震动）每页50个项目的排序项目，经过一些简单的调整，我们每个结果页面完成500ms。肯定是我们在TYPO3扩展中的错误查询，而AJAX只是等待，我认为你应该在开始时搜索它。

编辑：

为确保长时间位于TYPO3侧，您还应创建一个包含一些样本数据集的static file（类似于TYPO3预期的数据集）并检查其行为。

Jquery onClick慢页加载？

2 个答案: