在不移动鼠标的情况下,将浏览器光标从“等待”改为“自动”
我使用这个jQuery代码来设置鼠标指针,以在Ajax调用期间的繁忙状态(沙漏)…
$('body').css('cursor', 'wait');
和这个相应的代码将其设置回正常…
$('body').css('cursor', 'auto');
这工作正常…在一些浏览器。
在Firefox和IE上,只要我执行命令,鼠标光标就会改变。 这是我想要的行为。
在Chrome和Safari上,直到用户移动指针,鼠标光标才会从“繁忙”变为“自动”。
让不情愿的浏览器切换鼠标指针的最好方法是什么?
我宁愿这样做更优雅:
$(function(){ $("html").bind("ajaxStart", function(){ $(this).addClass('busy'); }).bind("ajaxStop", function(){ $(this).removeClass('busy'); }); });
CSS:
html.busy, html.busy * { cursor: wait !important; }
来源: http : //postpostmodern.com/instructional/global-ajax-cursor-change/
我相信这个问题(包括mousedown问题)现在已经在Chrome 50中修复了。
但是,只有当你不使用开发工具!
closures工具,光标应该立即响应更好。
我从Korayem解决scheme获得灵感。
使用Javascript:
jQuery.ajaxSetup({ beforeSend: function() { $('body').addClass('busy'); }, complete: function() { $('body').removeClass('busy'); } });
CSS:
.busy * { cursor: wait !important; }
在Chrome,Firefox和IE 10上进行testing。游标更改无需移动鼠标。 IE10需要“重要”。
编辑:在AJAX请求完成后,您仍然需要在IE 10上移动光标(所以出现正常的光标)。 出现等待光标而不移动鼠标。
首先,你应该知道,如果你有一个光标分配给你身体内的任何标签, $('body').css('cursor', 'wait');
将不会更改该标记的游标(像我一样,我使用cursor: pointer;
在我的所有锚标记)。 你可能要先看看我的解决scheme,首先是游标等待ajax调用
对于只有当用户在webkit浏览器上移动鼠标时才更新光标的问题,正如其他人所说,没有真正的解决scheme。
也就是说,如果您将css微调器dynamic添加到当前光标,仍然有一个解决方法。 这不是一个完美的解决scheme,因为您不确定光标的大小以及微调器是否正确定位。
光标后面的CSS微调器: DEMO
$.fn.extend( { reset_on : function(event_name, callback) { return this.off(event_name).on(event_name, callback); } }); var g_loader = $('.loader'); function add_cursor_progress(evt) { function refresh_pos(e_) { g_loader.css({ display : "inline", left : e_.pageX + 8, top : e_.pageY - 8 }); } refresh_pos(evt); var id = ".addcursorprog"; // to avoid duplicate events $('html').reset_on('mousemove' + id, refresh_pos); $(window). reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }). reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); }); } function remove_cursor_progress(evt) { var id = ".addcursorprog"; g_loader.css('display', 'none'); $('html').off('mousemove' + id); $(window).off('mouseenter' + id).off('mouseleave' + id); } $('.action').click(add_cursor_progress); $('.stop').click(remove_cursor_progress);
你将需要检查它是否是一个触摸设备以及var isTouchDevice = typeof window.ontouchstart !== 'undefined';
总之,你最好试着在你的页面中添加一个静态的微调器或者其他的东西来显示加载过程,而不是试图用光标来实现。
我不认为你能做到这一点。
但是,请尝试更改滚动位置; 这可能有帮助。
我还没有尝试过,但如果你创build一个绝对定位的透明的div,并在改变CSS之前填充视口呢? 然后,当身体上的CSS被改变,删除div。 这可能会触发正文上的鼠标hover事件,这可能会导致光标更新为最新的CSS值。
再一次,我没有testing过这个,但是值得一试。
嘿,伙计们,我有一个坚韧的解决scheme,适用于所有的浏览器。 假设是使用原型数据库。 有人可以把这个写成纯Javascript。 解决的方法是在复位光标后稍微移动光标,使光标移动。 这是发布在我的博客http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html 。
这是我的解决scheme:
function yourFunc(){ $('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto'); $('body').blur(); $('body').focus(function(e){ $('body') .mouseXPos(e.pageX + 1) .mouseYPos(e.pageX - 1); }); }
Korayem的解决scheme在现代Chrome浏览器,Safari浏览器中占100%,Firefox中占95%,但在Opera和IE中无法使用。
我改进了一下:
$('html').bind('ajaxStart', function() { $(this).removeClass('notbusy').addClass('busy'); }).bind('ajaxStop', function() { $(this).removeClass('busy').addClass('notbusy'); });
CSS:
html.busy, html.busy * { cursor: wait !important; } html.notbusy, html.notbusy * { cursor: default !important; }
现在在Chrome,Safari,Firefox和Opera中都可以100%的运行。 我不知道如何处理IE 🙁
从jQuery 1.9开始,你应该使用ajaxStart和ajaxStop来logging文件 。 他们在Firefox中工作正常。 没有在其他浏览器中testing过。
在CSS中:
html.busy * { cursor: wait !important; }
在javaScript中:
// Makes the mousecursor show busy during ajax // $( document ) .ajaxStart( function startBusy() { $( 'html' ).addClass ( 'busy' ) } ) .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )
这可能是WebKit中的一个错误; 你应该报告 。
$( '*')的CSS( '光标', '等待')。 将在网页上的任何地方工作,包括链接