Jquery wait cursor при загрузке html в div

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

Ответ 1

Первоначально стиль загружаемого изображения не отображается.
Измените стиль на видимый, когда начнете загрузку.
Измените стиль на невидимый при завершении загрузки с использованием аргумента обратного вызова для загрузки().

Пример:

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

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

И когда вы хотите сохранить его так, как было раньше:

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

и в вашем файле css добавьте что-то вроде этого:

body.cursorProgress {
  cursor: progress;
}

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

body.cursorProgress {
  cursor: progress !important;
}

Ответ 6

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

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

Ответ 7

Более чистый подход 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>

Ответ 8

Посмотрите на мое решение, оно охватывает все элементы, а не только тег тела: fooobar.com/info/90853/...