- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在一个简单的基于 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 中出现)。我尝试过减慢响应速度并使用粉红色覆盖层,这样它就会非常明显,但直到请求完成后它才会更新用户界面。保留 '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",dataType:"json",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 显示样式更改为 block (或恢复其初始值(如果已分配))。 CSS 中的此更改将导致浏览器尽快重排(又名“重绘”)。延迟确保它能够在 ajax 调用之前回流。延迟在所有浏览器中并不是必需的,但不会造成超过您指定的毫秒数的影响(像往常一样,IE 将是这里的限制因素,其他浏览器对 1 毫秒的延迟感到满意,IE 想要一些东西重新绘制更重要)。
这里有一个 jsfiddle 供您在几个浏览器中测试:jsfiddle example
关于ajax - 在同步 "Ajax"请求之前强制在 Webkit(Safari 和 Chrome)中重新绘制 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8040279/
如果我需要检测 Firefox,我使用了以下代码: var firefox = !(window.mozInnerScreenX == null); 我很好奇是否有类似的东西可以在不检查用户代理字符串
我正在开发我的第一个Windows窗体应用程序以使用WebKit.Net。我需要连接到https站点并弹出身份验证表单。使用.Net内置的浏览器,身份验证表单会自动弹出,但是WebKit只是将我放到4
就像您可以将 -webkit-gradient 添加到 -webkit-box-reflect 一样,您可以对反射执行转换吗?我正在反射的图像有一个 Angular ,我想尝试旋转反射或稍微倾斜它以使
我有一个加载一些网页的 QWebView,但是当鼠标被按下并拖动时的问题是它选择了所有阻碍它的东西。 有什么办法可以摆脱这个吗??我不想选择文本和其他项目。, 如果我限制 mouseMove 和 mo
我对编程和创建程序真的很陌生。最近我在浏览 iTunes 文件夹时看到了一个 .css 文件。我打开它,看到很多 -webkit 样式来设置界面样式。 我可以使用 webkit 来设置 C++、.NE
这个问题在这里已经有了答案: How do I fix inconsistent Textarea bottom margin in Firefox and Chrome? (4 个回答) 4年前关闭
我希望自定义webkit-scrollbar为悬停状态设置不同的背景颜色动画。下面的代码在悬停时更改颜色,但不设置任何动画。它可以在div上运行,所以我怀疑webkit-scrollbar在过渡时效果
我正在尝试评估 WebKit 补丁的可能性,该补丁将允许所有渲染的图形渲染到完全透明的背景上。 想要的效果是呈现完全没有任何背景的 Web 内容,它应该看起来漂浮在桌面上(或浏览器窗口后面显示的任何内
这是 HTML 代码: A B C 这是 CSS 代码: .row { line-height:0;} .item { line-hei
我经常看到这样的 css 动画代码: @-webkit-keyframes anim{ 0{ -webkit-transform: perspective(400px) rotate3d(
我想为元素的 -webkit-transform: rotateX() 设置动画,同时允许元素保持其 -webkit-transform: rotate() 属性不变。考虑以下代码: @-webkit
CSS3 规则带来了许多有趣的特性。 取border-radius , 例如。该标准规定,如果您编写此规则: div.rounded-corners { border-radius: 5px; }
我在想: 有没有人考虑过为嵌入式 Javafx 2.0 Webkit 浏览器或新的 QT5 - Webkit 实现 webdriver-interface。 有人对朝着这个方向发展的一些 Github
我正在尝试使用 WebKit 创建 Vala 程序。这是我编译它的方式: valac --pkg gtk+-3.0 --pkg granite --pkg glib-2.0 --pkg webkitg
我刚刚开始使用 webkit,我想先自己执行构建。我对如何使用 nightly sources of webkit 进行编译有点困惑。主 webkit 站点上的构建说明说要使用整个 SVN 树来执行完
我在做一些我认为很简单的事情时遇到了问题。读取输入字段的值,然后将该值写入文本文件。我得到它的工作,但只是部分和不一致。发生的情况是,文本 a) 被截断(并非所有在该字段中输入的数据都写入文件)和 b
我在使用 -webkit-animation 时遇到内存问题。 原则 我想为渐变背景制作动画。由于它们在关键帧中不可设置动画,我将每个背景放在不同的 div 中,并且我正在使用那些 div 不透明度和
困境: 在我的 CSS 文件中,我有这个: div { -webkit-transform: scale(0.5); } 在我的 jQuery 中,我稍后会这样做: $('div).css('
我正在尝试构建网络爬虫。 我需要两件事: 将 HTML 转换为 DOM 对象。 按需执行现有的 JavaScript。我期望的结果是一个 DOM 对象,其中执行加载的 JavaScript 已经执行。
似乎在元素上应用 webkit-transform 属性,或者它的父元素具有 webkit-over-flowing-scrolling: touch 完全打破了滚动中的滚动根本不起作用。 有没有人遇
我是一名优秀的程序员,十分优秀!