Создать загрузочный Div

Question

Я пытаюсь создать глупый загрузочный div. Я просто хочу, чтобы он показывался при каждом нажатии кнопки. У меня есть gif с именем ajaz-loader.gif, расположенный в img /

У меня есть это, и оно не работает ... Я только что нашел его в интернете. Есть идеи?

    <script>
    $('#loadingDiv').ajaxStart(function() {
      $(this).show();
    }).ajaxComplete(function() {
    $(this).hide();
    });
     </script>

Answer 1

Возможно, вы захотите опубликовать больше кода. С тем, что у вас есть выше, неясно, в чем может быть проблема. Возможно, это что-то простое, например, вы неправильно загружаете jQuery или неверный идентификатор, указанный для элемента. Возможно, это несколько сложнее, например, событие, которое запускает ajaxStart, никогда не срабатывает.

С учетом того, что в приведенном ниже коде есть некоторые неоптимальные практики (например, размещение информации о стиле непосредственно в HTML) и что я не обрабатываю ajax или не скрываюсь после успеха, это может произойти, если вы начали:

<div id="loadingDiv" style="display:none">
Congratulations! You clicked the button and can see the loading div now!
</div>

<input type="button" onclick="document.getElementById('loadingDiv').style.display='block';" value="Click me to see the div!"/>

Это может привести вас в правильном направлении. Я подозреваю, что этого недостаточно для того, чтобы делать все, что вы хотите, но если все, что вам действительно нужно, это «просто ... показывать каждый раз, когда нажимается кнопка», ну, это очень много, и изменение его для jQuery, вероятно, не сложно ...

Answer 2

    $(document).ready(function () {
        $("#btnid").click(function () {
            $("#loadingDiv").show();
            $.ajax({
                url: "url"
                cache: false,
                type: "GET",
                dataType: "text",
                success: function (data) {
                    //Success code here
                }
            });
            $("#loadingDiv").hide();
        });
    });

Это покажет ваш загрузочный div перед вызовом Ajax, а затем скроет его после того, успешно или нет.

Answer 3

Не забудьте обернуть ваш код внутри

$(function() {
  // YOUR CODE HERE
});

Тогда, если это все еще не работает, дважды проверьте, если ваш # loadingDiv

Это выглядит так:)

Отображение загрузки во время работы веб-службы

Answer 4

Я сделал свой собственный псевдокласс загрузки и отлично работает в приложении большой сети (jsp).

Мой код выглядит примерно так:

var CMSLoading =
{
        loading_div: null,
        queue: 0,
        start: function(never_stop)
        {
               //Create div with getLoadingDiv (wrong name) or show if exist
               // and increment queue
        },
        stop: function(turn_off)
        {
                //Check queue and hide or destroy div
        },
        getLoadingDiv: function()
        {
                // Create DIV and store in local variable loading_div
        }
}

Когда я запускаю вызов ajax CMSLoading.start() и когда Ajax заканчивает или умирает, звонят CMSLoading.stop();