我试图在使用 jQuery 的缓慢操作期间显示一个小的加载图像,但无法正确处理。这是一个有数千行的大表。当我选中“mostrarArticulosDeReferencia”复选框时,它会从这些行中删除“隐藏”类。此操作需要几秒钟,我想提供一些反馈。“正在加载”是一个带有小动画 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);
}
});
这就是我得到的
- 点击复选框
- 在 2/3 秒内没有任何反应(处理中)
- 页面得到更新
- 加载 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() 快得多,所以不需要加载动画......
这篇文章向我展示了光:显示/隐藏性能。