Question

我有一个包含大约260行的数据表。这些行中的每一行都由诸如parentHeaderName之类的属性标识。当点击该表的标题时，我有一些jQuery，它会简单地将标题更改为ajaxload.gif图像，就像这样

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

然后我通过调用

来切换所有260行

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

不幸的是，我无法获得将代码更改为ajaxload.gif以正常运行的代码部分。就好像该语句和切换语句都在同一时间运行。意思是，用户永远不会看到ajaxload.gif。我可以让图像显示的唯一方法是在两个语句之间放置警报（'...'）消息。显然，这不是一个解决方案。我尝试使用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图像的原因。

谢谢，克里斯

Answer 1

感谢大家的帮助。事实证明，问题更多的是使用toggle（）语句然后其他任何事情。 .toggle（）这么多记录是导致浏览器暂停的原因，无论我在.delay（），。when（）等方面做了什么。我最终做了一个直接的.hide（）和.show（），这些变化加速了预期的行为。为了确定当前的可见性（从而知道我是否应该使用.hide（）或.show（）），我检查了第一个匹配元素的可见性，例如： $（标准：第一：可见）并正确进行。

再次感谢，并表示最诚挚的问候。

- 克里斯

Answer 2

我的第一个想法就是这个切换发生得如此之快，以至于你根本不需要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是您的点击功能...

试一试，生病了。）

jQuery计时 - 想要在方法中添加类似于DoEvents（）的东西

2 个答案: