Chờ con trỏ trên toàn bộ trang html

89

Có thể đặt con trỏ "chờ" trên toàn bộ trang html một cách đơn giản không? Ý tưởng là để cho người dùng thấy rằng một cái gì đó đang diễn ra trong khi một cuộc gọi ajax đang được hoàn thành. Đoạn mã dưới đây hiển thị phiên bản đơn giản của những gì tôi đã thử và cũng giải thích các vấn đề tôi gặp phải:

  1. nếu một phần tử (# id1) có một bộ kiểu con trỏ, nó sẽ bỏ qua một bộ trên nội dung (hiển nhiên)
  2. một số phần tử có kiểu con trỏ mặc định (a) và sẽ không hiển thị con trỏ chờ khi di chuột
  3. phần tử nội dung có độ cao nhất định tùy thuộc vào nội dung và nếu trang ngắn, con trỏ sẽ không hiển thị bên dưới chân trang

Các bài kiểm tra:

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

Sau đó chỉnh sửa ...
Nó hoạt động trong firefox và IE với: 

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>

Vấn đề với (hoặc tính năng của) giải pháp này là nó sẽ ngăn các nhấp chuột vì div chồng chéo (cảm ơn Kibbee)

Sau này chỉnh sửa sau ...
Một giải pháp đơn giản hơn từ Dorward:

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

và sau đó 

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

Giải pháp này chỉ hiển thị con trỏ chờ nhưng cho phép nhấp chuột.

javascript  html  css  dynamic-css 
— Aleris
nguồn
Có vẻ như tôi không thể thay đổi con trỏ cho các phần tử được chọn. Có cách nào để thay đổi con trỏ cho phần tử được chọn không?
— Biswanath

Câu trả lời:

33

Tôi hiểu rằng bạn có thể không có quyền kiểm soát điều này, nhưng thay vào đó, bạn có thể sử dụng div "tạo mặt nạ" bao phủ toàn bộ phần thân với chỉ số z cao hơn 1. Phần trung tâm của div có thể chứa thông báo đang tải nếu bạn muốn.

Sau đó, bạn có thể đặt con trỏ đợi trên div và không phải lo lắng về các liên kết vì chúng nằm "dưới" div che của bạn. Đây là một số CSS mẫu cho "masking div":

thân {chiều cao: 100%; }
div # mask {con trỏ: chờ đợi; z-index: 999; chiều cao: 100%; chiều rộng: 100%; }
— Eric Wendelin
nguồn
3
Điều này thường có thể gây ra vấn đề. Trong Firefox, việc đặt một div cố định trên toàn bộ trang khiến toàn bộ trang trở nên không thể nhấp được. tức là, bạn không thể nhấp vào các liên kết, bởi vì bạn không nhấp vào liên kết mà bạn đang nhấp vào div phía trước liên kết.
— Kibbee
1
Hoạt động tốt trong firefox. Không may mắn trong IE :(. Trong IE, nó hoạt động chính xác như thể div không có ở đó. Cách duy nhất để có hành vi mong muốn là đặt màu trên nền div.
— Aleris
2
Ok sau khi chơi thêm một chút, cuối cùng nó đã hoạt động với: div # mask {display: none; con trỏ: chờ đợi; z-index: 9999; vị trí: tuyệt đối; đầu trang: 0; trái: 0; chiều cao: 100%; chiều rộng: 100%; màu nền: #fff; độ mờ: 0; bộ lọc: alpha (opacity = 0);}
— Aleris
Đồng ý, Kibbee, nó thực sự phụ thuộc vào hành vi mong muốn của bạn. Có vẻ như Aleris không muốn người dùng làm bất cứ điều gì (do đó là con trỏ chờ) cho đến khi AJAX gọi lại.
— Eric Wendelin 13/10/08
3
Tôi đã sử dụng position: fixed để nó luôn ở trên màn hình, với position: tuyệt đối nó sẽ không hiển thị khi tôi ở cuối trang.
— Jj.
111

Nếu bạn sử dụng phiên bản sửa đổi một chút này của CSS mà bạn đã đăng từ Dorward,

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

sau đó bạn có thể thêm một số jQuery thực sự đơn giản để hoạt động cho tất cả các lệnh gọi ajax:

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

hoặc, đối với các phiên bản jQuery cũ hơn (trước 1.9):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
— Dani
nguồn
4
Tôi thực sự muốn sử dụng câu trả lời này ... tại sao nó không phải là câu được chấp nhận?
— ảm đạm.penguin
1
@ dark.penguin Câu hỏi này đã hoạt động hơn 3 năm trước câu trả lời của tôi, nhưng tôi đã tình cờ gặp nó trong quá trình tìm kiếm giải pháp của riêng mình và quyết định chia sẻ giải pháp mà tôi đã sử dụng: hỗn hợp câu trả lời của Dorward, jQuery, và ý thức tốt của Kyle. Nó hơi khác so với những gì OP đang tìm kiếm, nhưng nếu nó phù hợp với bạn, thì hãy sử dụng nó! :)
— Dani
Tôi đồng ý. Hoạt động tuyệt vời và IMHO nó phải là câu trả lời được chấp nhận.
— savehansson
1
Nếu điều này không hiệu quả với bạn, hãy kiểm tra tại đây: JQuery.com "Kể từ JQuery 1.9, các sự kiện Ajax toàn cầu chỉ được kích hoạt trên phần tử tài liệu." Ví dụ:$(document).ajaxStart(function () { $("html").addClass("wait"); });
— Debbie A
1
Trước khi loại bỏ lớp chờ, bạn có thể muốn kiểm tra xem có phải $.activelà 0 hay không, trong trường hợp nhiều yêu cầu đã được thực hiện và tất cả chúng đều chưa hoàn thành.
— Shane Reustle
12

Điều này dường như hoạt động trong firefox

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

Phần * đảm bảo rằng con trỏ không thay đổi khi bạn di chuột qua một liên kết. Mặc dù các liên kết sẽ vẫn có thể nhấp được.

— Kibbee
nguồn
* {con trỏ: đợi đã! quan trọng; } Sẽ đơn giản hơn và nhiều khả năng để làm việc trong IE (trong đó có rất nhiều lỗi với từ khóa kế thừa)
— Quentin
1
* {Cursor: wait} có thể được áp dụng từ javascript không? - ngoại trừ bằng cách lặp lại tất cả các phần tử trong toàn bộ DOM :)
— Aleris
có thể bạn có thể thêm một phần tử kiểu và đặt innerHTML. Sẽ không được thanh lịch cho lắm, nhưng nó có thể hoạt động.
— Kibbee 11/10/08
3
.wait, .wait * {cusor: đợi đã! quan trọng; } và sau đó đặt document.body.className = 'wait'; với JavaScript
— Quentin
1
Lưu ý rằng có lỗi đánh máy của "con trỏ" trong nhận xét trên, trong trường hợp bạn sao chép / dán nó.
— defos1
7

Tôi đã phải vật lộn với vấn đề này trong nhiều giờ hôm nay. Về cơ bản mọi thứ đều hoạt động tốt trong FireFox nhưng (tất nhiên) thì không trong IE. Trong IE, con trỏ chờ hiển thị SAU KHI chức năng tiêu tốn thời gian được thực thi.

Cuối cùng tôi đã tìm thấy thủ thuật trên trang web này: http://www.codingforums.com/archive/index.php/t-37185.html

Mã:

//...
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ã của tôi chạy trong một lớp JavaScript do đó là this và MyClass (MyClass là một singleton).

Tôi đã gặp vấn đề tương tự khi cố gắng hiển thị một div như được mô tả trên trang này. Trong IE, nó đã hiển thị sau khi chức năng được thực thi. Vì vậy, tôi đoán thủ thuật này cũng sẽ giải quyết được vấn đề đó.

Cảm ơn một triệu thời gian để glenngv tác giả của bài đăng. Bạn đã làm ngày của tôi vui lên!!!

— pasx
nguồn
4

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

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

— redbmk
nguồn
2

Tại sao bạn không chỉ sử dụng một trong những đồ họa tải ưa thích đó (ví dụ: http://ajaxload.info/ )? Con trỏ đang chờ dành cho chính trình duyệt - vì vậy bất cứ khi nào nó xuất hiện, nó có liên quan đến trình duyệt chứ không phải với trang.

— không xác định
nguồn
Tôi đồng ý một phần. Ít nhất trên cửa sổ con trỏ xuất hiện, nếu chính trình duyệt đang tải một trang, thì cursor: progresskhông cursor: wait. Sử dụng con trỏ đó sẽ chặt chẽ hơn nhiều với trải nghiệm người dùng của trình duyệt. Nhưng tôi thực sự thích ý tưởng thay đổi con trỏ để chỉ ra rằng trình duyệt đang hoạt động giống như nó đang hoạt động khi nó tải một trang.
— cúm
2

Cách dễ nhất mà tôi biết là sử dụng JQuery như sau:

$('*').css('cursor','wait');
— jere_hr
nguồn
mà có thể mất "mãi mãi" nếu bạn có rất nhiều yếu tố, đặc biệt là trên một máy tính chậm
— redbmk
1

Hãy thử css:

html.waiting {
cursor: wait;
}

Có vẻ như nếu thuộc tính bodyđược sử dụng như được áp dụng cho htmlnó sẽ không hiển thị con trỏ chờ trên toàn bộ trang. Hơn nữa, nếu bạn sử dụng một lớp css, bạn có thể dễ dàng kiểm soát khi nào nó thực sự hiển thị.

— Trò chơi kì quái
nguồn
Lớp chờ đợi đó là gì? Nó là một cái gì đó tùy chỉnh?
— Sebas
1

Đây là một giải pháp phức tạp hơn không yêu cầu CSS bên ngoài:

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

với điều này bạn có thể làm:

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
— kofifus
nguồn
1

Tôi đã sử dụng bản chuyển thể của Eric Wendelin giải pháp điều . Nó sẽ hiển thị wait-div lớp phủ động, trong suốt trên toàn bộ nội dung, nhấp chuột sẽ bị chặn bởi wait-div khi hiển thị:

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 ...
— ungalcrys
nguồn
1

Hai pence của tôi:

Bước 1: Khai báo mảng. Điều này sẽ được sử dụng để lưu trữ các con trỏ ban đầu đã được gán:

var vArrOriginalCursors = new Array(2);

Bước 2: Triển khai chức năng con trỏModifyEntirePage

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

Chức năng của nó: Lấy tất cả các phần tử trên trang. Lưu trữ các con trỏ ban đầu được gán cho chúng trong mảng được khai báo ở bước 1. Sửa đổi các con trỏ thành con trỏ mong muốn như được truyền bởi tham số CursorType

Bước 3: Khôi phục các con trỏ trên trang

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

Tôi đã chạy điều này trong một ứng dụng và nó hoạt động tốt. Chỉ lưu ý là tôi đã không kiểm tra nó khi bạn đang thêm động các phần tử.

— indiaaditya
nguồn
1

Để đặt con trỏ từ JavaScript cho toàn bộ cửa sổ, hãy sử dụng:

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

Từ CSS:

html { cursor: wait; }

Bổ sung thêm logic nếu cần.

— Peter J. de Bruin
nguồn
Giải pháp javascript này là tốt nhất, thực hiện công việc mà không cần chạm vào hành lý HTML. Điều này tốt hơn nhiều so với việc chuyển đổi các lớp trên các phần tử rất chậm nếu bạn có nhiều nút trong DOM của mình.
— Rajshekar Reddy
0

JavaScript thuần túy này có vẻ hoạt động khá tốt ... được thử nghiệm trên các trình duyệt FireFox, Chrome và Edge.

Tôi không chắc về hiệu suất của điều này nếu bạn có quá nhiều phần tử trên trang của mình và máy tính chạy chậm ... hãy thử và xem.

Đặt con trỏ để tất cả các phần tử chờ:

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

Đặt con trỏ cho tất cả các phần tử trở lại mặc định:

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

Một phiên bản thay thế (và có lẽ dễ đọc hơn một chút) sẽ là tạo một hàm setCursor như sau:

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

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

và sau đó gọi

setCursor("wait");

và

setCursor("default");

để đặt con trỏ chờ và con trỏ mặc định tương ứng.

— javocity
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.