1. Dom
  2. Pytanie i odpowiedź
  3. kursor oczekiwania jquery podczas ładowania html w div

kursor oczekiwania jquery podczas ładowania html w div

2009-02-18 11 views

Odpowiedz

7
  1. Początkowo Style loading image niewidoczny.
  2. Zmień styl na widoczny po rozpoczęciu ładowania.
  3. Zmień styl na niewidoczny po załadowaniu zakończonym za pomocą argumentu wywołania zwrotnego do załadowania().

Przykład:

$("#loadImage").show(); 
$("#MyDiv").load("page.php", {limit: 25}, function(){ 
    $("#loadImage").hide(); 
});

Źródło

2009-02-18 14:59:06

+10

Aby faktycznie utworzyć ładujący się gif, sprawdź http://www.ajaxload.info/ gdzie możesz spersonalizuj i zapisz. – Darwyn

62 
$("body").css("cursor", "progress");

Wystarczy pamiętać, aby zwrócić go potem:

$MyDiv.load("page.php", function() { 
    // this is the callback function, called after the load is finished. 
    $("body").css("cursor", "auto"); 
});

Źródło

2009-02-18 14:58:12 Magnar

+3

to nie działa na moim miejscu, ale $ („*”) css („kursor” , "progress") zrobił – Bryan

+9

hmm ... to podejście ma zły efekt uboczny ... ustawienie $ ("*").css ("kursor", "auto") usuwa wszelkie specjalne kursory, które można ustawić na elementach na stronie. nie dobrze! – ekkis

+1

@ekkis Czy znasz alternatywę? – k0pernikus

12

$("*").css("cursor", "progress") będzie działać bez względu na to, gdzie na stronie aktualnie wskazującego. W ten sposób nie trzeba przesuwać kursora, aby zobaczyć, jak jest aktywowany.

Źródło

2010-06-04 18:08:49 mountain

+0

ładne, ale nie działa w Chrome (http://code.google.com/p/chromium/issues/detail?id=26723) –

+0

działa teraz w chrome – Bryan

+4

yikes! takie podejście jest wadliwe. zamazuje przypisania kursora do wszystkiego na stronie. – commonpike

9

myślę, że najlepiej jest ustawić w pliku css

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

i dodaj/usuń klasy czekać w organizmie

metoda ta zastępuje wszystkie kursory w wejściach, linki itp

Źródło

2010-10-03 22:42:44 Marmot

+0

Podobają mi się podejścia, ale nie działa na IE 9. podejście do góry z '$ ('*'). Css (" kursor ", ...)' did though – ekkis

+0

yikes! takie podejście jest wadliwe. zamazuje przypisania kursora do wszystkiego na stronie – ekkis

+0

To jest faktycznie najlepsze rozwiązanie dla różnych przeglądarek - przetestowane. po usunięciu klasy wait CSS będzie kaskadować z powrotem do ustawionego kursora, nie zmieniając go tak, jak inne rozwiązania. Thx Marmot. @ekkis powinieneś przetestować go ponownie. działa w IE9. –

0

Dla na przykład, jeśli chcesz wyświetlić większy obraz po najechaniu na miniaturę:

//Hovered image 
    $("a.preview").hover(function(e) { 
      var aprev = this; 
      //Show progress cursor while loading image 
      $(aprev).css("cursor", "progress"); 
    //#imgpreview is the <div> to be loaded on hover 
    $("#imgpreview").load(function() {   
       $(aprev).css("cursor", "default"); 
      }); 
    }

Źródło

2011-07-08 03:31:06

0

Cięcie Podejście analityki JQuery, choć niekoniecznie wydajne, polega na dodawaniu i usuwaniu zajętej klasy do wszystkich obiektów.

pamiętać, że nie wszystkie przeglądarki (np Firefox) zakładamy wysokości 100% dla zewnętrznej widocznego obiektu, tak zajęty kursor dostanie wyświetlany tylko na części ekranu

<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     .busy 
     { 
      cursor: wait !important; 
     } 
    </style> 
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

     $(function() { 

      $("#btnToggleWait").click(function (e) { 
       if ($(e.target).hasClass("busy")) { 
        $("*").removeClass("busy"); 
       } 
       else { 
        $("*").addClass("busy"); 
       } 

       e.preventDefault(); 
       e.stopPropagation(); 
       return false; 
      }); 
     }); 

     //]]> 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <button id="btnToggleWait"> 
      Toggle Wait</button> 
    </div> 
    </form> 
</body>

Źródło

2012-08-03 11:42:18 pixelda

4

naprawdę myślę że jest to lepsze rozwiązanie, aby po prostu użyć klasy w elemencie ciała

$('body').addClass('cursorProgress');

a kiedy chcesz je zachować, jak to było wcześniej tylko:

$('body').removeClass('cursorProgress');

a ty css plik umieścić coś takiego:

body.cursorProgress { 
    cursor: progress; 
}

Więc z tego rozwiązania nie są przesłanianie domyślne lub zmiany wprowadzone na stylach kursora, a Drugą zaletą jest to, że masz możliwość dodawania ważne w twoim css.

body.cursorProgress { 
    cursor: progress !important; 
}

Źródło

2015-02-17 13:29:58 robertovg

Powiązane problemy

 Powiązane problemy