JQuery ждать курсора при загрузке HTML в DIV - PullRequest
Новая
       22

JQuery ждать курсора при загрузке HTML в DIV

17 голосов
/ 18 февраля 2009

Я хочу показать пользователю состояние загрузки результата. Как изменить курсор или gif при загрузке результата в div с помощью $ MyDiv.load ("page.php")?

Ответы [ 8 ]

62 голосов
/ 18 февраля 2009 
$("body").css("cursor", "progress");

Только не забудьте вернуть его потом: 

$MyDiv.load("page.php", function () {
    // this is the callback function, called after the load is finished.
    $("body").css("cursor", "auto");
});
12 голосов
/ 04 июня 2010

$("*").css("cursor", "progress") будет работать независимо от того, на какой странице вы сейчас находитесь. Таким образом, вам не нужно перемещать курсор, чтобы увидеть его активированным.

10 голосов
/ 04 октября 2010

Я думаю, что лучше всего настроить в css файле 

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

и добавление / удаление класса wait в теле

этот метод переопределяет все курсоры во входах, ссылках и т. Д.

7 голосов
/ 18 февраля 2009
  1. Первоначально стиль загружаемого изображения невидим.
  2. Измените стиль на видимый, когда вы начинаете загрузку.
  3. Измените стиль на невидимый, когда загрузка завершится с использованием аргумента обратного вызова для load ().

Пример: 

 $("#loadImage").show();
 $("#MyDiv").load("page.php", {limit: 25}, function(){
   $("#loadImage").hide();
 });
4 голосов
/ 17 февраля 2015

Я действительно считаю, что лучше использовать класс в элементе body 

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

А когда вы хотите оставить все как прежде, просто: 

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

и в ваш css файл положите что-то вроде этого: 

body.cursorProgress {
  cursor: progress;
}

Таким образом, с этим решением вы не отменяете значения по умолчанию или изменения, которые вы вносите в стили курсора, и второе преимущество заключается в том, что у вас есть возможность добавлять важные в ваш CSS. 

body.cursorProgress {
  cursor: progress !important;
}
0 голосов
/ 23 июня 2016

Посмотрите на мое решение, оно охватывает все элементы, а не только тег body: https://stackoverflow.com/a/26183551/1895428

0 голосов
/ 03 августа 2012

Более чистый подход JQuery, хотя и не обязательно эффективный, заключается в добавлении и удалении класса занятости для всех объектов.

Обратите внимание, что не все браузеры (например, Firefox) предполагают высоту 100% для наиболее видимого объекта, поэтому курсор занятости отображается только на части экрана 

<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>
0 голосов
/ 08 июля 2011

Например, если вы хотите показать увеличенное изображение при наведении на миниатюру 

//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");
            });
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...