jQuery在慢速操作期间显示"加载"

Question

我试图在使用jQuery的慢速操作期间显示一个小的加载图像,但无法正确.这是一张有数千行的大表.当我选中"mostrarArticulosDeReferencia"复选框时,它会从这些行中删除"隐藏"类.此操作需要几秒钟,我想提供一些反馈."loading"是一个带有小动画gif的div

这是完整的代码

jQuery(document).ready(function() {
jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
        jQuery("#loading").show(); //not showing
        jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
        jQuery("#loading").hide();
    } else {
        jQuery("#loading").show();  //not showing
        jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
        jQuery("#loading").hide();
    }
});
jQuery("#loading").hide();
});

看起来jquery正在"优化"这3行

        jQuery("#loading").show(); //not showing
        jQuery("#listadoArticulos tr.r").removeClass("hidden");
        jQuery("#loading").hide();

永远不会显示加载div.有任何想法吗？

奖励:有一种更快的方式来做这个显示/隐藏的事情吗？发现切换速度慢.

更新:我试过这个

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
            jQuery("#loading").show(); //not showing
            jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
            setTimeout("jQuery('#loading').hide()", 1000);
    } else {
            jQuery("#loading").show();  //not showing
            jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
            setTimeout("jQuery('#loading').hide()", 1000);
    }
});

这就是我得到的

1. 点击复选框
2. 在2/3秒内没有任何事情发生(处理)
3. 页面得到更新
4. 加载div在瞬间出现

更新2:我有一个有效的解决方案.但为什么我必须使用setTimeout才能使它工作超出我的意义......

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
            jQuery("#loading").show();
            setTimeout("jQuery('#listadoArticulos tr.r').removeClass('hidden');", 1);
            setTimeout("jQuery('#loading').hide()", 1);
    } else {
            jQuery("#loading").show();
            setTimeout("jQuery('#listadoArticulos tr.r').addClass('hidden');", 1);
            setTimeout("jQuery('#loading').hide()", 1);
    }
});

更新3:刚刚为这个特殊情况找到了更好的解决方案.

//mostrar u ocultar articulos de referencia
$("#mostrarArticulosDeReferencia").click(function(event){
    if( $("#mostrarArticulosDeReferencia").attr("checked") )
        $("tr.r").css({'display':'table-row'});
    else
        $("tr.r").css({'display':'none'});
});

使用.css({'display':'none'})比hide()更快,所以不需要加载动画......
本文向我展示了光:显示/隐藏性能.

Answer 1

我尝试了一切，但我不得不得出结论，这是浏览器脑残的产物。

1. jQuery 告诉浏览器显示/隐藏加载 div
2. jQuery 告诉浏览器从行中添加/删除隐藏类
3. jQuery 告诉浏览器显示/隐藏加载 div
4. 浏览器以错误的顺序执行上述所有步骤（第 2 个步骤）

我上次更新中的“setTimeout”强制浏览器以正确的顺序执行所有步骤。它很糟糕，不优雅，但至少它有效......

更新：setTimeout 是必要的，因为 jquery“简化”了命令链。如果我告诉它隐藏一个元素并再次显示它，它会简单地忽略该命令，因为最终结果将与不执行任何操作相同...