Poczekaj na kursor na całej stronie html

Question 1

Czy można w prosty sposób ustawić kursor na „czekaj” na całej stronie html? Chodzi o to, aby pokazać użytkownikowi, że coś się dzieje podczas kończenia połączenia AJAX. Poniższy kod pokazuje uproszczoną wersję tego, co wypróbowałem, a także pokazuje problemy, na które napotykam:

jeśli element (# id1) ma ustawiony styl kursora, zignoruje ten ustawiony na body (oczywiście)
niektóre elementy mają domyślny styl kursora (a) i nie będą wyświetlać kursora oczekiwania po najechaniu
element body ma określoną wysokość w zależności od zawartości i jeśli strona jest krótka, kursor nie pojawi się pod stopką

Test:

<html>
    <head>
        <style type="text/css">
            #id1 {
                background-color: #06f;
                cursor: pointer;
            }

            #id2 {
                background-color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="id1">cursor: pointer</div>
        <div id="id2">no cursor</div>
        <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
    </body>
</html>

Później edycja ...
Działało w Firefox i IE z:

div#mask { display: none; cursor: wait; z-index: 9999; 
position: absolute; top: 0; left: 0; height: 100%; 
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}

<a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false">
Do something</a>

Problem z tym rozwiązaniem (lub jego cechą) polega na tym, że zapobiegnie ono kliknięciom z powodu nakładającego się elementu div (dzięki Kibbee)

Później później edytuj ...
Prostsze rozwiązanie od Dorward:

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

i wtedy

<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>

To rozwiązanie pokazuje tylko kursor oczekiwania, ale umożliwia kliknięcia.

Question 2

Rozumiem, że możesz nie mieć nad tym kontroli, ale możesz zamiast tego wybrać element div „maskujący”, który obejmuje całą treść z indeksem z wyższym niż 1. Środkowa część elementu div może zawierać komunikat o ładowaniu, jeśli chcesz.

Następnie możesz ustawić kursor tak, aby czekał na element div i nie musisz martwić się o linki, ponieważ znajdują się one „pod” Twoim elementem div maskującym. Oto przykład CSS dla „elementu div maskującego”:

body {wysokość: 100%; }
div # mask {kursor: czekaj; indeks z: 999; wysokość: 100%; szerokość: 100%; }

Question 3

Jeśli używasz tej nieco zmodyfikowanej wersji CSS, którą opublikowałeś od Dorward,

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

możesz wtedy dodać naprawdę proste jQuery do pracy dla wszystkich wywołań ajax:

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

lub dla starszych wersji jQuery (przed 1.9):

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

Question 4

Wydaje się, że to działa w przeglądarce Firefox

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

Część * zapewnia, że kursor nie zmienia się po najechaniu kursorem na łącze. Chociaż linki nadal będą klikalne.

Question 5

Walczę z tym problemem od wielu godzin. W zasadzie wszystko działało dobrze w FireFox, ale (oczywiście) nie w IE. W IE kursor oczekiwania pokazywał się PO wykonaniu czasochłonnej funkcji.

W końcu znalazłem sztuczkę na tej stronie: http://www.codingforums.com/archive/index.php/t-37185.html

Kod:

//...
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) {...}

Mój kod działa w klasie JavaScript, stąd this i MyClass (MyClass to singleton).

Miałem te same problemy, gdy próbowałem wyświetlić element div, jak opisano na tej stronie. W IE pokazywał się po wykonaniu funkcji. Więc myślę, że ta sztuczka rozwiązałaby również ten problem.

Dzięki zillion czasu glenngv autorowi posta. Naprawdę sprawiłeś, że mój dzień !!!

Question 6

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

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

Question 7

Dlaczego po prostu nie użyjesz jednej z tych wymyślnych grafik do ładowania (np .: http://ajaxload.info/ )? Kursor oczekiwania jest przeznaczony dla samej przeglądarki - więc gdy się pojawi, ma coś wspólnego z przeglądarką, a nie ze stroną.

Question 8

Najłatwiejszy sposób, jaki znam, to używanie JQuery w następujący sposób:

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

Question 9

Wypróbuj CSS:

html.waiting {
cursor: wait;
}

Wygląda na to, że jeśli właściwość bodyjest używana jako dołączona do htmlniej, kursor oczekiwania na całej stronie nie jest wyświetlany. Ponadto, jeśli używasz klasy css, możesz łatwo kontrolować, kiedy faktycznie ją wyświetla.

Question 10

Oto bardziej rozbudowane rozwiązanie, które nie wymaga zewnętrznego 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);
}

dzięki temu możesz:

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

Question 11

Użyłem adaptacji rozwiązania Erica Wendelina . Wyświetli przezroczystą, animowaną nakładkę elementu div na całe ciało, kliknięcie zostanie zablokowane przez element div wait, gdy będzie widoczny:

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 ...

Question 12

Moje dwa pensy:

Krok 1: Zadeklaruj tablicę. Będzie to używane do przechowywania oryginalnych kursorów, które zostały przypisane:

var vArrOriginalCursors = new Array(2);

Krok 2: Zaimplementuj funkcję 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;
    }
}

Co robi: Pobiera wszystkie elementy na stronie. Przechowuje oryginalne kursory przypisane do nich w tablicy zadeklarowanej w kroku 1. Modyfikuje kursory na żądany kursor przekazany przez parametr CursorType

Krok 3: Przywróć kursory na stronie

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

Uruchomiłem to w aplikacji i działa dobrze. Jedynym zastrzeżeniem jest to, że nie testowałem go, gdy dynamicznie dodajesz elementy.

Question 13

Aby ustawić kursor z JavaScript dla całego okna, użyj:

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

Z CSS:

html { cursor: wait; }

W razie potrzeby dodaj dalszą logikę.

Question 14

BlockUI jest odpowiedzią na wszystko. Spróbuj.

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

Question 15

Ten czysty JavaScript wydaje się działać całkiem nieźle ... przetestowany w przeglądarkach FireFox, Chrome i Edge.

Nie jestem pewien co do wydajności, gdybyś miał nadmiar elementów na swojej stronie i wolny komputer ... spróbuj i zobacz.

Ustaw kursor na czekanie wszystkich elementów:

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

Ustaw kursor dla wszystkich elementów z powrotem na domyślne:

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

Alternatywną (i być może nieco bardziej czytelną) wersją byłoby utworzenie funkcji setCursor w następujący sposób:

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

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

a następnie zadzwoń

setCursor("wait");

i

setCursor("default");

aby ustawić odpowiednio kursor oczekiwania i kursor domyślny.