Подождите курсор над всей html-страницей

Если вы используете эту слегка измененную версию CSS, которую вы опубликовали из Dorward,

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

затем вы можете добавить некоторые очень простые jQuery чтобы работать для всех вызовов ajax:

$(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

или, для более старых версий jQuery (до 1.9):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});

Это, кажется, работает в Firefox

<style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>

часть * гарантирует, что курсор не изменится при наведении на ссылку. Хотя ссылки все равно будут кликабельными.

Я боролся с этой проблемой в течение нескольких часов сегодня. В основном все работало просто отлично в FireFox, но (конечно) не в IE. В IE курсор ожидания показывался после выполнения трудоемкой функции.

Я наконец нашел трюк на этом сайте: http://www.codingforums.com/archive/index.php/t-37185.html

код:

//...
document.body.style.cursor = 'wait';
setTimeout(this.SomeLongFunction, 1);

//setTimeout syntax when calling a function with parameters
//setTimeout(function() {MyClass.SomeLongFunction(someParam);}, 1);

//no () after function name this is a function ref not a function call
setTimeout(this.SetDefaultCursor, 1);
...

function SetDefaultCursor() {document.body.style.cursor = 'default';}

function SomeLongFunction(someParam) {...}

мой код работает в классе JavaScript, следовательно, это и MyClass (MyClass - это одиночка.)

У меня были те же проблемы при попытке отобразить div, как описано на этой странице. В IE он показывался после выполнения функции. Поэтому я думаю, что этот трюк тоже решит эту проблему.

огромное спасибо glenngv автору поста. Ты действительно сделал мой день!!!

css:.waiting * { cursor: 'wait' }

jQuery:$('body').toggleClass('waiting');

Почему бы вам просто не использовать один из этих причудливых графиков загрузки (например:http://ajaxload.info/)? ожидающий курсор предназначен для самого браузера-поэтому всякий раз, когда он появляется, он имеет какое-то отношение к браузеру, а не к странице.

самый простой способ, который я знаю, это использовать JQuery следующим образом:

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

попробуйте css:

html.waiting {
cursor: wait;
}

кажется, что если собственность body используется в качестве приложения к html он не показывает курсор ожидания по всей странице. Кроме того, если вы используете класс css, вы можете легко контролировать, когда он действительно показывает его.

вот более сложное решение, которое не требует внешнего CSS:

function changeCursor(elem, cursor, decendents) {
    if (!elem) elem=$('body');

    // remove all classes starting with changeCursor-
    elem.removeClass (function (index, css) {
        return (css.match (/(^|\s)changeCursor-\S+/g) || []).join(' ');
    });

    if (!cursor) return;

    if (typeof decendents==='undefined' || decendents===null) decendents=true;

    let cname;

    if (decendents) {
        cname='changeCursor-Dec-'+cursor;
        if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' , .'+cname+' * { cursor: '+cursor+' !important; }').appendTo('head');
    } else {
        cname='changeCursor-'+cursor;
        if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' { cursor: '+cursor+' !important; }').appendTo('head');
    }

    elem.addClass(cname);
}

С этим можно сделать:

changeCursor(, 'wait'); // wait cursor on all decendents of body
changeCursor($('#id'), 'wait', false); // wait cursor on elem with id only
changeCursor(); // remove changed cursor from body

BlockUI-это ответ на все. Дайте ему попробовать.

http://www.malsup.com/jquery/block/

я использовал адаптации Эрик Венделин'ы. Он покажет прозрачное, анимированное наложение wait-div по всему телу, щелчок будет заблокирован wait-div, пока виден:

css:

div#waitMask {
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    cursor: wait;
    background-color: #000;
    opacity: 0;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

js:

// to show it
$("#waitMask").show();
$("#waitMask").css("opacity"); // must read it first
$("#waitMask").css("opacity", "0.8");

...

// to hide it
$("#waitMask").css("opacity", "0");
setTimeout(function() {
    $("#waitMask").hide();
}, 500) // wait for animation to end

html:

<body>
    <div id="waitMask" style="display:none;">&nbsp;</div>
    ... rest of html ...

мои два пенса:

Шаг 1: Объявите массив. Это будет использоваться для хранения исходных курсоров, которые были назначены:

var vArrOriginalCursors = new Array(2);

Шаг 2: Реализуем функцию cursorModifyEntirePage

 function CursorModifyEntirePage(CursorType){
    var elements = document.body.getElementsByTagName('*');
    alert("These are the elements found:" + elements.length);
    let lclCntr = 0;
    vArrOriginalCursors.length = elements.length; 
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        vArrOriginalCursors[lclCntr] = elements[lclCntr].style.cursor;
        elements[lclCntr].style.cursor = CursorType;
    }
}

что она делает: Возвращает все элементы на странице. Сохраняет исходные курсоры, назначенные им в массиве, объявленном на шаге 1. Изменяет курсоры на нужный курсор, передаваемый параметром CursorType

Шаг 3: Навести курсор на страница

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

я запустил это в приложении, и он отлично работает. Единственное предостережение заключается в том, что я не проверял его, когда вы динамически добавляете элементы.