Подождите, пока курсор переместится на всю HTML-страницу

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

Я понимаю, что у вас может не быть контроля над этим, но вместо этого вы можете использовать «маскирующий» div, который покрывает все тело с z-индексом выше 1. Центральная часть div может содержать сообщение о загрузке, если хотите.

Затем вы можете установить курсор так, чтобы он ждал на div, и вам не нужно беспокоиться о ссылках, поскольку они находятся «под» вашим маскирующим div. Вот пример CSS для «маскирующего div»:

body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }

Кажется, это работает в firefox

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

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

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

html.waiting {
cursor: wait;
}

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

Если вы используете эту слегка измененную версию 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"); });
});

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

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

Сегодня я часами борюсь с этой проблемой. В основном все работало нормально в 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, следовательно, this и MyClass (MyClass - одноэлементный).

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

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

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

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

BlockUI - это ответ на все вопросы. Попробуйте.

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

Вот более сложное решение, не требующее внешнего 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

Я использовал адаптацию решения Эрик Венделин. Он покажет прозрачный анимированный оверлей 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];
    }
}

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

Чтобы установить курсор из JavaScript для всего окна, используйте:

document.documentElement.style.cursor = 'wait';

Из CSS:

html { cursor: wait; }

При необходимости добавьте дополнительную логику.

Кажется, этот чистый JavaScript работает очень хорошо ... протестирован в браузерах FireFox, Chrome и Edge.

Я не уверен в производительности этого, если у вас было переизбыток элементов на вашей странице и медленный компьютер ... попробуйте и посмотрите.

Установите курсор, чтобы все элементы ожидали:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

Верните курсор для всех элементов по умолчанию:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

Альтернативной (и, возможно, более читаемой) версией было бы создание функции setCursor следующим образом:

function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

а потом позвони

setCursor("wait");

и

setCursor("default");

для установки курсора ожидания и курсора по умолчанию соответственно.