Ajouter une image pré-chargeur dans une fonction JS

Question

J'ai cette fonction JS, qui appellera l'image suivante:

  function showNextManifest() { 
       var currentManifest = jQuery('#selectedManifestId').val(); 
       jQuery.ajax({ 
        url: "${createLink(action:'nextManifest')}?currentManifestId=" + currentManifest, 
        dataType: "json", 
        success: function(e) { 
         if (e.success) { 
          jQuery('#gotoPageNumber').val(e.pageNumber); 
          jQuery('#selectedManifestId').val(e.id); 
          jQuery('#popupManifestCustomItemId').val(e.id); 
          showLargeManifestViewer(e.url); 
         } else { 
          alert('No more additional frames for this roll.'); 
         } 
        } 
       }); 

      } 

Je voudrais déposer dans un gif préchargement jusqu'à ce que l'image s'affiche. Est-ce que cela va avant le if (e.success)?

Answer 1

Il suffit d'ajouter le chargeur gif à votre conteneur avant d'effectuer un ajax; Je peux voir votre fonction remplacer l'url.

function showNextManifest() { 
    showLargeManifestViewer('/loading.gif'); 
    //now it shows loader gif until ajax completed  

    var currentManifest = jQuery('#selectedManifestId').val(); 
       jQuery.ajax({ 
        url: "${createLink(action:'nextManifest')}?currentManifestId=" + currentManifest, 
        dataType: "json", 
        success: function(e) { 
         if (e.success) { 
          jQuery('#gotoPageNumber').val(e.pageNumber); 
          jQuery('#selectedManifestId').val(e.id); 
          jQuery('#popupManifestCustomItemId').val(e.id); 
          showLargeManifestViewer(e.url); 
         } else { 
          alert('No more additional frames for this roll.'); 
         } 
        } 
       }); 

      }