我试图在 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);
}
});
这就是我得到的
- 点击复选框
- 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() 快得多,因此不需要加载动画...
这篇文章让我明白了:show/hide performance .
最佳答案
显然,您正在触发一个异步请求(是的,异步,换句话说,它不与代码同步运行!)运行过程”。异步请求回调函数最后需要调用$('#loading').hide()
。
这是一个很好的例子:
$('#loading').show();
$.getJSON('someURL', function(data) {
// Do slow processing.
});
$('#loading').hide();
这显然行不通。它将显示、触发异步请求,然后立即隐藏。您需要将代码重写为:
$('#loading').show();
$.getJSON('someURL', function(data) {
// Do slow processing.
$('#loading').hide();
});
关于jQuery 在缓慢运行期间显示 "loading",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1253402/