İmleci html sayfasının tamamında bekleyin

Question 1

İmleci tüm html sayfasında basit bir şekilde 'beklemeye' ayarlamak mümkün müdür? Buradaki fikir, kullanıcıya bir ajax çağrısı tamamlanırken bir şeyler olduğunu göstermektir. Aşağıdaki kod, denediğimin basitleştirilmiş bir versiyonunu gösterir ve ayrıca karşılaştığım sorunları gösterir:

bir öğe (# id1) imleç stiline sahipse, gövde üzerindeki bir kümeyi yok sayacaktır (açıkçası)
bazı öğelerin varsayılan bir imleç stili (a) vardır ve fareyle üzerine gelindiğinde bekleme imlecini göstermez
gövde öğesinin içeriğe bağlı olarak belirli bir yüksekliği vardır ve sayfa kısaysa imleç altbilginin altında görünmez

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>

Daha sonra düzenleme ...
Firefox ve IE'de çalıştı:

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>

Bu çözümün (veya özelliğinin) sorunu, örtüşen div nedeniyle tıklamaları engellemesidir (teşekkürler Kibbee)

Daha sonra düzenleme ...
Dorward'dan daha basit bir çözüm:

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

ve sonra

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

Bu çözüm yalnızca bekleme imlecini gösterir ancak tıklamalara izin verir.

Question 2

Bunun üzerinde kontrole sahip olmayabileceğinizi anlıyorum, ancak bunun yerine tüm gövdeyi 1'den büyük bir z-endeksi ile kaplayan bir "maskeleme" div'i seçebilirsiniz. Dilerseniz div'in orta kısmı bir yükleme mesajı içerebilir.

Ardından, imleci div'de beklemeye ayarlayabilir ve maskeleme div'inizin "altında" oldukları için bağlantılar için endişelenmenize gerek kalmaz. Aşağıda "maskeleme div" için bazı örnek CSS verilmiştir:

vücut {boy:% 100; }
div # mask {imleç: bekleyin; z-endeksi: 999; yükseklik:% 100; genişlik:% 100; }

Question 3

Dorward'dan gönderdiğiniz CSS'nin biraz değiştirilmiş bu sürümünü kullanırsanız,

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

daha sonra tüm ajax çağrılarında çalışmak için gerçekten basit bazı jQuery ekleyebilirsiniz :

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

veya daha eski jQuery sürümleri için (1.9'dan önce):

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

Question 4

Bu Firefox'ta çalışıyor gibi görünüyor

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

* Bölümü, bir bağlantının üzerine geldiğinizde imlecin değişmemesini sağlar. Bağlantılar yine de tıklanabilir olacaktır.

Question 5

Bugün saatlerdir bu sorunla mücadele ediyorum. Temelde her şey FireFox'ta gayet iyi çalışıyordu ama (elbette) IE'de değil. IE'de bekleme imleci, zaman alıcı işlev çalıştırıldıktan SONRA gösteriyordu.

Sonunda hileyi bu sitede buldum: 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) {...}

Kodum bir JavaScript sınıfında çalışır, dolayısıyla bu ve Sınıfım (Sınıfım bir tekildir).

Bu sayfada açıklandığı gibi bir div görüntülemeye çalışırken aynı sorunları yaşadım. IE'de, işlevin yerine getirilmesinden sonra gösteriliyordu. Sanırım bu numara bu sorunu da çözer.

Yazının yazarı glenngv için milyonlarca kez teşekkürler. Gerçekten günümü yaptın !!!

Question 6

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

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

Question 7

Neden bu süslü yükleme grafiklerinden birini kullanmıyorsunuz (örneğin: http://ajaxload.info/ )? Bekleyen imleç tarayıcının kendisi içindir - bu yüzden göründüğünde sayfayla değil tarayıcıyla bir ilgisi vardır.

Question 8

Bildiğim en kolay yol JQuery'yi şöyle kullanmak:

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

Question 9

CSS'yi deneyin:

html.waiting {
cursor: wait;
}

Görünüşe göre, özellik bodykendisine uygulandığı gibi kullanılırsa html, tüm sayfanın üzerinde bekleme imlecini göstermez. Ayrıca, bir css sınıfı kullanırsanız, gerçekten ne zaman göstereceğini kolayca kontrol edebilirsiniz.

Question 10

İşte harici CSS gerektirmeyen daha ayrıntılı bir çözüm:

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

bununla şunları yapabilirsiniz:

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

Eric Wendelin'in bir uyarlamasını kullandım çözümünün . Tüm gövde üzerinde şeffaf, animasyonlu bir yer paylaşımlı bekleme bölümü gösterecek, tıklama görünürken bekleme bölümü tarafından engellenecektir:

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

İki pensim:

Adım 1: Bir dizi bildirin. Bu, atanan orijinal imleçleri saklamak için kullanılacaktır:

var vArrOriginalCursors = new Array(2);

Adım 2: cursorModifyEntirePage işlevini uygulayın

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

Ne yapar: Sayfadaki tüm öğeleri alır. 1. adımda belirtilen dizide kendilerine atanan orijinal imleçleri saklar. İmleçleri, CursorType parametresi tarafından iletildiği gibi istenen imlece değiştirir.

3. Adım: Sayfadaki imleçleri geri yükleyin

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

Bunu bir uygulamada çalıştırdım ve iyi çalışıyor. Unsurları dinamik olarak eklerken onu test etmedim.

Question 13

İmleci tüm pencere için JavaScript'ten ayarlamak için şunu kullanın:

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

CSS'den:

html { cursor: wait; }

Gerekirse daha fazla mantık ekleyin.

Question 14

BlockUI her şeyin cevabıdır. Bir şans ver.

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

Question 15

Bu saf JavaScript oldukça iyi çalışıyor gibi görünüyor ... FireFox, Chrome ve Edge tarayıcılarında test edildi.

Sayfanızda çok fazla öğe varsa ve yavaş bir bilgisayarınız varsa bunun performansından emin değilim ... deneyin ve görün.

Tüm öğelerin beklemesi için imleci ayarlayın:

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

Tüm öğeler için imleci varsayılana geri ayarlayın:

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

Alternatif (ve belki biraz daha okunabilir) bir sürüm, aşağıdaki gibi bir setCursor işlevi oluşturmak olabilir:

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

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

ve sonra ara

setCursor("wait");

ve

setCursor("default");

sırasıyla bekleme imlecini ve varsayılan imleci ayarlamak için.