在同步“Ajax”请求之前强制在Webkit(Safari和Chrome)中重新绘制
|
在一个简单的基于Ajax的网站中,我们正在同步地发出一些HttpRequests请求(我意识到“同步Ajax”在某种程度上是矛盾的).这是同步和异步完成的主要原因是为了简化一些参与者的编程模型(长篇大论).
无论如何,我们希望能够在发出请求之前进行样式更改(特别是在Google搜索时使用半透明白色覆盖屏幕),然后在结果返回时将其删除.基本上这看起来像： load:function(url) {
....
busyMask.className="Shown"; //display=block; absolute positioned full screen semi-transparent
var dta=$.ajax({type:"GET",dataType:"json",url:url,async: false}).responseText;
busyMask.className="Hidden"; //sets display=none;
...
return JSON.parse(dta);
}
众所周知,同步请求将锁定UI.所以毫不奇怪,白色叠加层从未出现在Safari和Chrome中(有趣的是在Firefox中).我已经尝试减慢响应速度并使用粉红色叠加层,这样很明显,但它只是在请求完成之后才会更新UI.离开’busyMask.className =“Hidden”’部分会显示掩码 – 但只有在ajax请求完成后才会显示. 我已经看到许多强迫UI重绘的技巧(例如Why HourGlass not working with synchronous AJAX request in Google Chrome?,http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript),但它们似乎都在试图显示实际的“永久”DOM或样式更新,而不是暂时显示样式更改同步请求. 那么有没有办法做到这一点,还是我正在打败一场失败的战斗？可能我们只需要根据具体情况切换到异步请求,以处理性能最差的请求,这可能是解决学习曲线问题的一种不错的方法……但我希望有一个外部的方框在这里回答. 解决方法
好的,为了这个问题的目的,我将忽略为什么你需要同步XHR请求的理由.我知道有时工作限制不允许使用最佳实践解决方案,因此我们“做”以完成工作.因此,让我们专注于如何通过可视化更新为您提供同步ajax！
考虑到你正在使用jQuery来处理你的XHR请求,我将假设可以使用jQuery显示/隐藏加载指示器并处理任何计时问题. 首先让我们在标记中设置一个加载指标： <div id="loading" style="display:none;">Loading...</div> 现在让我们创建一些javascript： // Show the loading indicator,then start a SYNCRONOUS ajax request
$('#loading').show().delay(100).queue(function() {
var jqxhr = $.ajax({type:"GET",url:"www.yoururl.com/ajaxHandler",async: false}).done(function(){
//Do your success handling here
}).fail(function() {
//Do your error handling here
}).always(function() {
//This happens regardless of success/failure
$('#loading').hide();
});
$(this).dequeue();
});
首先,我们想要显示我们的加载指示符,然后在我们的同步XHR请求开始之前给浏览器稍微延迟重新绘制.通过使用jQuery的.queue()方法,我们将.ajax()调用放在默认的fx队列中,以便在.delay()完成之后才会执行,这当然不会发生在.show之后()完成. jQuery .show()方法将目标元素的CSS显示样式更改为阻止(或者在分配时恢复其初始值). CSS中的这种更改将导致浏览器尽快重排(也称为“重绘”).延迟确保它能够在ajax调用之前重排.在所有浏览器中都不需要延迟,但不会超过您指定的毫秒数(通常,IE将成为限制因素,其他浏览器对1ms延迟感到满意,IE需要一些东西重绘更重要). 这是一个jsfiddle,你可以在几个浏览器中测试：jsfiddle example （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |