الحصول على مؤشر المتصفح من "الانتظار" إلى "تلقائي" دون تحريك المستخدم الماوس

Question

يمكنني استخدام رمز مسج هذا لتعيين مؤشر الماوس إلى حالته المزدحمة (الساعة الرملية) أثناء مكالمة AJAX ...

$('body').css('cursor', 'wait');

وهذا التعليمات البرمجية المقابلة لإعداده مرة أخرى ...

$('body').css('cursor', 'auto');

هذا يعمل بشكل جيد ... على بعض المتصفحات.

على Firefox و IE، بمجرد تنفيذ الأمر، يتغير مؤشر الماوس. هذا هو السلوك الذي أريده.

على Chrome و Safari، لا يتغير مؤشر الماوس بشكل واضح من "مشغول" إلى "تلقائي" حتى يتحرك المستخدم المؤشر.

ما هي أفضل طريقة للحصول على المتصفحات المكترفة لتبديل مؤشر الماوس؟

Answer 1

إنه خطأ في كلا المتصفحات في الوقت الحالي. مزيد من التفاصيل في كلا الروابط (في تعليقات كذلك):

http://code.google.com/p/chromium/issues/detail؟id=26723.

و

http://code.google.com/p/chromium/issues/detail؟id=20717.

Answer 2

أفضل أن أفعل ذلك أكثر أناقة مثل:

$(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/inructional/global-ajax-cursor-change/

Answer 3

أعتقد أن هذه المشكلة (بما في ذلك مشكلة Mousedown) ثابتة الآن في Chrome 50.

ولكن فقط إذا كنت لا تستخدم أدوات المطور !!

أغلق الأدوات ويجب أن يستجيب المؤشر بشكل أفضل.

Answer 4

حصلت على مستوحاة من محلول Korayem.

جافا سكريبت:

jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
    },
    complete: function() {
       $('body').removeClass('busy');
    }
});

CSS:

.busy * {
    cursor: wait !important;
}

تم اختباره على Chrome و Firefox و IE 10. يتغير المؤشر دون تحريك الماوس. "! مهم" ضروري ل IE10.

تحرير: لا يزال يتعين عليك نقل المؤشر على IE 10 بعد اكتمال طلب AJAX (حتى يظهر المؤشر العادي). تظهر المؤشر الانتظار دون تحريك الماوس ..

Answer 5

بادئ ذي بدء، يجب أن تدرك أنه إذا كان لديك مؤشر مخصص لأي علامة داخل جسمك، $('body').css('cursor', 'wait'); لن يغير مؤشر هذه العلامة (مثلي، أنا استخدم cursor: pointer; على كل ما عندي من علامة مرساة). قد ترغب في إلقاء نظرة على الحل الخاص بي لهذه المشكلة بالذات أولا: المؤشر انتظر دعوة ajax

بالنسبة للمشكلة التي يتم فيها تحديث المؤشر فقط بمجرد أن يقوم المستخدم بنقل الماوس على متصفحات WebKit، كما قال أشخاص آخرون، لا يوجد حل حقيقي.

ومع ذلك، لا يزال هناك حل بديل إذا قمت بإضافة سبينر CSS إلى المؤشر الحالي ديناميكيا. هذا ليس حلا مثاليا لأنك لا تعرف ذلك بالتأكيد حجم المؤشر وإذا سيتم وضع Spinner بشكل صحيح.

CSS Spinner بعد المؤشر: التجريبي

$.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';

في الختام، من الأفضل محاولة إضافة في صفحتك سبينر ثابتة أو أي شيء آخر يعرض عملية التحميل بدلا من محاولة القيام بذلك مع المؤشر.

Answer 6

يعمل حل Korayem بالنسبة لي في حالات 100٪ في الكروم الحديثة، Safari، في حالات 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;
}

الآن يعمل في حالات 100٪ في Chrome و Safari و Firefox والأوبرا. أنا لا أعرف ماذا أفعل مع IE :(

Answer 7

حل العمل على Codesandbox

بعض الحلول الأخرى لا تعمل في جميع الظروف. يمكننا تحقيق النتيجة المرجوة مع اثنين من قواعد 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 بشكل موثوق على تحديث (مرة أخرى، على بعض المحركات)، يتعين علينا إضافة فئة أخرى. يبدو أن إزالة الطبقات يتم التعامل معها بشكل مختلف عن إضافةها.

Answer 8

لا أعتقد أنك ستكون قادرا على القيام بذلك.

ومع ذلك، حاول تغيير موقف التمرير؛ ممكن أن تساعد.

Answer 9

هنا هو الحل الخاص بي:

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);
});

}

Answer 10

اعتبارا من jQuery 1.9 يجب ajaxstart و ajaxstop للوثيقة. وبعد أنها تعمل بشكل جيد بالنسبة لي في فايرفوكس. لم يتم اختبارها في متصفحات أخرى.

في CSS:

html.busy *
{
   cursor: wait !important;
}

في جافا سكريبت:

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

Answer 11

حاول استخدام قيمة CSS الصحيحة الخاصة بمتانة المؤشر:

$('body').css('cursor','wait');

http://www.w3schools.com/css/pr_class_cursor.asp.

Answer 12

ربما يكون خطأ في WebKit؛ يجب الإبلاغ عنه.

Answer 13

لم أحاول ذلك، ولكن ماذا عن إذا قمت بإنشاء DIV شفافة تم وضعه تماما ويملأ Viewport قبل تغيير CSS. ثم، عند تغيير CSS على الجسم، قم بإزالة DIV. هذه ربما يؤدي إلى حدث Mouseover على الجسم، والتي ربما تسبب مؤشر التحديث إلى أحدث قيمة CSS.

مرة أخرى، لم أختبر هذا، لكن الأمر يستحق رصاصة.

Answer 14

يا شباب، لدي حل شجني Nitty يعمل على جميع المتصفحات. الافتراض هو مكتبة protoype المستخدمة. شخص ما يمكن أن يكتب هذا هو جافا سكريبت عادي جدا. الحل هو الحصول على div على رأس كل شيء فقط بعد إعادة تعيين المؤشر ويهزته قليلا لتسبب التحرك المؤشر. يتم نشر هذا في مدونتي http://arunmobc.blogspot.com/02/02/cursor-not-changing-issue.html..

Answer 15

$ ('*'). CSS ("المؤشر"، "الانتظار")؛ سوف تعمل في كل مكان على الصفحة بما في ذلك الروابط