Question

在网上搜索了一天后，我无法找到我要找的东西，或者我想念一些东西。

我有一个本地html页面，其中包含来自远程xml文件的ajax get内容。如何在完整的ajax get（文本和图像）期间显示加载器。

这是我的代码：

<div id="lastshot"></div>
<div id="xmlactu" class="bgC5EFF7"></div>

 $(document).ready(  
 function()
 {
   $.ajax( {
            type: "GET",
            url: "http://s604712774.onlinehome.fr/originsapp/origins3.xml",
            dataType: "xml",
            success: function(xml) 
                     {
                       $(xml).find('home').each(   
                         function()
                         {
                            var title = $(this).find('title').text();
                            var photo = $(this).find('photo').text();
                            var description = $(this).find('description').text();
                            var link = $(this).find('link').text();
$('<a href="' +link+ '"><div style="background:url(' +photo+ ')center center no-repeat;height: 100%;background-size: cover;"><div style=";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0),rgba(0, 0, 0, 0),rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.88), #000000);"><p class="animated fadeInLeft accueilshoottitle125 body1010">' +title+ '</p><div class="body1010"><p class="accueilshootdesc125 animated fadeInUp">' +description+ '</p></div><img class="animated infinite pulse" style="width: 15%;position: absolute;bottom: 40%;margin-left: 42%;margin-right: 42%;" src="../../img/button/galeributton.png"></div></div></a>').appendTo('#lastshot');
                          }),

                       $(xml).find('actualite').each(   
                         function()
                         {
                            var actu = $(this).find('actu').text();
                            var actuimg = $(this).find('actuimg').text();
                            var actutitle = $(this).find('actutitle').text();
                            var actudate = $(this).find('actudate').text();
                            var button = $(this).find('button').text();
$('<div class="animated fadeInLeft"><img class="accueilactuimg" src="' +actuimg+ '"><p class="accueilactutitle body1010">' +actutitle+ '</p><p class="accueilactu body1010">' +actu+ '</p>' +button+ '<p class="actudate body1010">' +actudate+ '</p><hr style="margin-bottom: 0px;margin-top: 10px;height: 12px;border: 0;box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);"></div>').appendTo('#xmlactu');
                          });
                      }
        });
  }
);

由于

Answer 1

＆＃13;

$(document).ready(function(){
  var GetUrl = "http://s604712774.onlinehome.fr/originsapp/origins3.xml";
  
  $.ajax({
    type: "GET",
    url: GetUrl,
    dataType: "xml",
  })
  .done(function(xml) {
    // YOUR CODE HERE
  })
  .always(function() {
    $('#loader').hide();
  })
  .fail(function(err) {
    console.log('error', err);
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lastshot"></div>
<div id="xmlactu" class="bgC5EFF7"></div>
<div id="loader"> loading</div>

＆＃13;

Answer 2

您可以做的是已经在标记中隐藏了加载元素，然后使用beforeSend选项中的$.ajax属性来显示加载程序。然后，您可以在ajax承诺上使用.always方法重新隐藏加载程序。

＆＃13;

$(document).ready(
  function() {
    $.ajax({
      type: "GET",
      url: "http://s604712774.onlinehome.fr/originsapp/origins3.xml",
      dataType: "xml",
      beforeSend: function() {
        $("#loading").show();
      },
      success: function(xml) {
        $(xml).find('home').each(
            function() {
              var title = $(this).find('title').text();
              var photo = $(this).find('photo').text();
              var description = $(this).find('description').text();
              var link = $(this).find('link').text();
              $('<a href="' + link + '"><div style="background:url(' + photo + ')center center no-repeat;height: 100%;background-size: cover;"><div style=";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0),rgba(0, 0, 0, 0),rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.88), #000000);"><p class="animated fadeInLeft accueilshoottitle125 body1010">' + title + '</p><div class="body1010"><p class="accueilshootdesc125 animated fadeInUp">' + description + '</p></div><img class="animated infinite pulse" style="width: 15%;position: absolute;bottom: 40%;margin-left: 42%;margin-right: 42%;" src="../../img/button/galeributton.png"></div></div></a>').appendTo('#lastshot');
            }),

          $(xml).find('actualite').each(
            function() {
              var actu = $(this).find('actu').text();
              var actuimg = $(this).find('actuimg').text();
              var actutitle = $(this).find('actutitle').text();
              var actudate = $(this).find('actudate').text();
              var button = $(this).find('button').text();
              $('<div class="animated fadeInLeft"><img class="accueilactuimg" src="' + actuimg + '"><p class="accueilactutitle body1010">' + actutitle + '</p><p class="accueilactu body1010">' + actu + '</p>' + button + '<p class="actudate body1010">' + actudate + '</p><hr style="margin-bottom: 0px;margin-top: 10px;height: 12px;border: 0;box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);"></div>').appendTo('#xmlactu');
            });
      }
    }).always(function () {
      $("#loading").hide();
    });
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lastshot"></div>
<div id="xmlactu" class="bgC5EFF7"></div>
<div id="loading" style="display: none;">Loading message and image goes here</div>

＆＃13;

jQuery .ajax docs for good measure：http://api.jquery.com/jquery.ajax/

Lazyload AJAX GET

2 个答案: