Подождите, пока курсор на всю страницу html

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

Это похоже на firefox

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

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

Ответ 4

Сегодня я борется с этой проблемой. В основном все прекрасно работало в 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 автор сообщения. Ты действительно сделал мой день!

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

html.waiting {
cursor: wait;
}

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

Я использовал адаптацию Eric Wendelin. Он покажет прозрачный анимированный оверлейный 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 ...