Показать ajax spinner, скрыть отображение страницы до тех пор, пока все вызовы ajax не будут завершены?

Question

Я создаю веб-приложение с большим количеством вызовов ajax, 100+, которые я использую, чтобы внедрить весь свой контент в мое веб-приложение.

Я надеялся найти способ скрыть страницу и показать ajax spinner, пока все вызовы ajax не будут завершены ... и/или все приложение загружено, а затем отобразит сайт.

В противном случае пользователь может перемещаться по страницам, на которых А. не может быть полностью отображен правильно, или B. будет находиться в середине навигации, когда сайт будет обновляться до «Домой» при полной загрузке.

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

https://stackoverflow.com/a/14038050

$(document).ajaxStop(function() { 
     // $.active == 0 
    }); 

https://stackoverflow.com/a/12313138/2676129

$(document).ajaxStart(function() { 
    $.mobile.loading('show'); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
}); 

Как я мог бы получить эту работу ? мои вызовы ajax ссылаются на несколько файлов .js (различные разделы приложения)

благодарим за помощь!

редактирования: пример Ajax вызова используется

$.ajax(
     { 
      url: "http://myurl", 
      type: 'get', 
      dataType: 'jsonp', 
      success: function(data) 
      { 
       if (data.result == 'success') 
       { 
        var previousPageID = ""; 
        var currentPageID = ""; 
        $.each(data.data, function(key, data)     //scans through each Lv1 Category, creates a button and page and links thems. 
        { 
         var divLabel = data.label; 
         var pageID = currentPageID + data.label.replace(/\s/g, ""); 
         $('#contentPage').append(generateButtons(pageID, divLabel));              //generates a normal button for a category from CMS and generates the relevant page to link to. 
         var previousPageID = currentPageID; 
         generateNextPage(data, previousPageID); 
        }); 
        $("#Page").trigger("create");            //once html is injected into home <div> applies jquery mobile styling and effects (enhance) 
       } 
      } 
     }); 

Answer 1

Просто хотелось бы отметить более простое решение, но тем не менее эффективными. Вам нужно добавить этот загрузочный div на свою страницу.

<div id="loading"></div> 

После этого со следующими мы уверены, что этот DIV собирается показать или скрыть всякий раз, когда начинается вызов Ajax и останавливается соответственно.

$(document).ajaxStop(function() { 
     $('#loading').hide(); 
    }); 

    $(document).ajaxStart(function() { 
     $('#loading').show(); 
    }); 

Наконец, добавьте следующий CSS, чтобы гарантировать, что чем DIV будет отображаться в полноэкранном режиме, как заблокированный элемент пользовательского интерфейса (который предполагает, что страница загружается что-то/вместо блесны).

#loading { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,.5); 
    -webkit-transition: all .5s ease; 
    z-index: 1000; 
    display:none; 
} 

Demo JSFIDDLE here

Answer 2

Один из подходов будет отображать анимацию загрузки как часть вашей начальной страницы & загрузки страницы.

Затем подождите, пока ваши выдающиеся вызовы ajax достигнут нуля, и как только это произойдет, скройте анимацию загрузки.

Ваш документ готов будет выглядеть примерно так:

$(document).ready(function() { 
    $('#spinner').addClass('spin'); 

    function stopSpinner() { 
     $('#loading').addClass('hide'); 
     $('#loading').one('webkitTransitionEnd', function() { 
      $('#loading').hide(); 
     }); 
    } 

    $(document).ajaxStop(function() { 
     // $.active == 0 
     stopSpinner(); 
    }); 
}); 

Ваша разметка будет иметь что-то вроде этого, как последний элемент в теле:

<div id="loading"> 
    <div id="spinner"></div> 
</div> 

со стилями, как это:

#loading { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,.5); 
    -webkit-transition: all .5s ease; 
    z-index: 1000; 
} 

#loading.hide { 
    opacity: 0; 
} 

#spinner { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    background-color: yellow; 
    -webkit-transition: all 1000s linear; 
} 

#spinner.spin { 
    -webkit-transform: rotate(100000deg); 
} 

Очень длительное время перехода и большое вращение, чтобы имитировать навсегда Imation. Вы также можете заменить это анимацией CSS3, анимированным GIF или другим, чтобы получить необходимый эффект.

Demo fiddle (примечание: он просто использует SetTimeout подделать обратный вызов, чтобы скрыть загрузчик)