この 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/
Korayem のソリューションは、最新の 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で何をすべきかわかりません:(
他のソリューションの一部は、すべての状況で機能するとは限りません。2 つの CSS ルールを使用して、目的の結果を得ることができます。
body.busy, .busy * {
cursor: wait !important;
}
.not-busy {
cursor: auto;
}
前者は、忙しいことを示しており、ページ上のすべての要素に適用され、他のカーソル スタイルを上書きしようとしています。後者はページ本体にのみ適用され、単に UI の更新を強制するために使用されます。このルールはできるだけ具体的でなく、他のページ要素に適用する必要はありません。
次に、次のようにビジー状態をトリガーして終了できます。
function onBusyStart() {
document.body.classList.add('busy');
document.body.classList.remove('not-busy');
}
function onBusyEnd() {
document.body.classList.remove('busy');
document.body.classList.add('not-busy');
}
要約すると、カーソルを更新するにはカーソルのスタイルを変更するdocument.body.style.cursor必要がありますが、カーソルを移動するまで、Webkit などの一部のエンジンでは、直接変更または同様の操作を行っても意図した効果が得られません。クラスを使用して変更に影響を与えると、より堅牢になります。ただし、UI を確実に強制的に更新するために (これも一部のエンジンで)、別のクラスを追加する必要があります。クラスの削除は、クラスの追加とは異なる方法で処理されるようです。
私はあなたがそれをすることができるとは思わない。
ただし、スクロール位置を変更してみてください。それは役立つかもしれません。
jquery 1.9以降、文書化するにはajaxStartとajaxStopが必要です。彼らはFirefoxで私にとってはうまくいきます。他のブラウザではテストしていません。
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' ) } )
私はこれを試していませんが、CSSを変更する直前に、絶対に配置されてビューポートを埋める透明なdivを作成した場合はどうでしょうか。次に、本体のcssが変更されたら、divを削除します。これにより、本体でマウスオーバーイベントがトリガーされ、カーソルが最新のCSS値に更新される可能性があります。
繰り返しますが、私はこれをテストしていませんが、一見の価値があります。
カーソル プロパティに正しい css 値を使用してみてください。
$('body').css('cursor','wait');
やあみんな、私はすべてのブラウザで動作する核心的なソリューションを持っています. protoype ライブラリを使用することを前提としています。誰かがこれをプレーンな Javascript として書くこともできます。解決策は、カーソルをリセットした直後にすべての上に div を配置し、少し振ってカーソルを移動させることです。これは私のブログhttp://arunmobc.blogspot.com/2011/02/cursor-not-ching-issue.htmlで公開されています。
$（'*'）。css（'cursor'、'wait'）; リンクを含むページのどこでも機能します