Lazyload AJAX GET

Question

花了一整天在網上搜索後，我找不到我在找什麼，或者我想念一些東西。

我有一個本地html頁面與ajax從遠程xml文件中獲取內容。 如何在完整的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

$(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); 
 
    }) 
 
});

<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>

Answer 2

你可以做的是已經加載部件隱藏在你的標記，然後使用beforeSend屬性在您的$.ajax選項中顯示加載程序。然後，您可以在ajax承諾中使用.always方法重新隱藏加載器。

$(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(); 
 
    }); 
 
    } 
 
);

<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>

jQuery的阿賈克斯文檔的好辦法：http://api.jquery.com/jquery.ajax/