Add an Image pre-loader into a JS function

I have this JS function, which will call the next image:

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

          }

I would like to drop开发者_运维知识库 in a gif preloading until the image gets displayed. Does this go before the if (e.success) ?

Just add the loader gif to your container before ajaxing; I can see your function replace the 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.');
                      }
                  }
              });

          }