Lazyload AJAX GET

Question

웹에서 검색하는 하루를 보낸 후에 내가 찾고있는 것을 찾을 수 없거나 뭔가 이해하지 못했습니다.

원격 xml 파일에서 ajax get 콘텐츠가있는 로컬 HTML 페이지가 있습니다. 전체 Ajax 가져 오기 (텍스트 및 이미지) 중에 로더를 표시하려면 어떻게해야합니까? 여기

내 코드입니다 :

<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'); 
          }); 
         } 
     }); 
    } 
); 

덕분에 이미 로딩 요소가 마크 업에 숨겨진 한 후 beforeSend 속성을 사용하여 당신이 할 수있는 일

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

로더를 표시하는 옵션은 $.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/