1

我有一个包含大约 260 行的数据表。这些行中的每一行都由诸如 parentHeaderName 之类的属性标识。单击该表的标题时，我有一些 jQuery 可以将标题短暂更改为 ajaxload.gif 图像，如下所示

$('#Header').html('<img src="images/ajaxload.gif"');

然后我通过调用切换所有 260 行

$([parentHeaderName=something]).toggle();

不幸的是，我无法让将标头更改为 ajaxload.gif 的代码部分正常运行。就好像该语句和切换语句都在同时运行。这意味着，用户永远不会看到 ajaxload.gif。我可以让图像显示的唯一方法是在两个语句之间放置一个 alert('...') 消息。显然，这不是作为解决方案所期望的。我试过使用 delay() 和 setTimeout 无济于事。我想我需要的是某种在 jQuery 或 javascript 中等效的 DoEvents，它可以让图像在切换执行之前显示。

有任何想法吗？

谢谢，克里斯

更新：感谢反馈的人。这是实际的代码：

$('.sixdegreestypeheader').click(function() {
    var headerName = $(this).attr("headername");
    var jq = "[headername$=" + headerName + "]";
    var jq2 = "[parentheadername$=" + headerName + "]";

    var originalTextValue = $(jq).text();
    var originalHTMLValue = $(jq).html();

    if (originalHTMLValue.indexOf("collapse") == -1) {
        $(jq).html('<img src="images/collapse.gif" /> ' + originalTextValue);
    }
    else {
        $(jq).html('<img src="images/expand.gif" /> ' + originalTextValue);
    }

    // alert('break here to act as a DoEvents.') // this forces the image change... but I don't want to have to use an alert to force this
    $(jq2).toggle();

    return false;
});

（此代码实际上将标头更改为 expand.gif 或 collapse.gif，而不是 ajaxload.gif。）

我确实尝试了延迟建议

$(jq2).delay(500).toggle();

但它没有任何帮助。当需要切换的行数很少时——比如说，最多 20 行——没有问题。但在某些情况下，我需要隐藏一堆（例如 260），就好像浏览器需要几秒钟才能通过 DOM 来完成所有隐藏的事情。这就是我最初希望使用 ajaxload.gif 图像的原因。

谢谢，克里斯

4

2 回答 2

1

感谢大家的帮助。事实证明，问题更多在于 toggle() 语句而不是其他任何东西。不管我在 .delay()、.when() 等方面做了什么，.toggle() 处理这么多记录是导致浏览器挂起的原因。我最终做了一个直接的 .hide() 和.show()，这些变化加快了预期的行为。为了确定当前的可见性（从而知道我应该使用 .hide() 还是 .show()），我检查了第一个匹配元素的可见性，例如 $(criteria:first:visible) 并进行了适当的处理。

再次感谢，最好的问候。

- 克里斯

于 2011-03-07T20:54:09.253 回答
0

我的第一个想法是这种切换发生得如此之快，以至于您甚至根本不需要 ajaxload.gif。所以，如果是这样的话，那是一件好事，对吧？

我的第二个想法是你如何用任何标题文本重新替换 ajaxload.gif ......这个回调何时以及如何发生？

我的第三个想法是一切都发生得非常快，这很好，但无论如何你仍然想显示加载器......如果是这样的话，将 .delay(500) 或任何时间投入到你的链中，应该让它保持。我觉得你没有展示更多的代码，你能展示一下吗？

这是我在此同时尝试的快速想法....

$( function(){
    var header = $('#Header');
    header.bind('click', function(){
        $(this).html('<img src="images/ajaxload.gif">');
        $([parentHeaderName=something]).delay(500).toggle();
    });
});

现在这实际上会使切换在触发之前等待，因此，您可能希望在再次用标题文本替换 ajaxload.gif 之前将延迟放在发生的链上......

我希望这在某种程度上有所帮助，否则请给我更多信息，我很乐意进一步了解。

编辑：

好的，现在我认为这与未加载的图像有关，并且警报正在给这些图像加载时间。因为这些图像首先不在页面上，所以在加载它们之前页面没有引用它们，所以这可能会让我弄乱你的时间......也许尝试加载，然后在回调中，设置你的单击...如果您使用的是 jquery 1.5，什么时候可能会有所帮助...

$.when( $('<img src="images/collapse.gif" />').load(), $('<img src="images/expand.gif" />').load() ).then( clickSetUp );

clickSetUp 是您的点击功能...

试试看，我会在附近:)

于 2011-03-02T18:19:35.863 回答