如何在jQuery中显示内容之前显示setTimeout图像？

I have button that has a on.click(function() {}. Inside the click function is a setTimeout( function() {} that will show the content from external html file.

<button type="button" class="btn btn-primary choose-iphone-btn">Jet Black</button>

    $(function() {

        $('.choose-iphone-btn').click(function() {

            setTimeout( function() {

                $.get('iphone-checkout.html')
                 .success(function(data) {
                     $('.iphone-pre-order-sales-content-info').html(data);
                });

            }, 3000);

        });

});

I want to display

<img src="images/default.gif" /> 

for 3 seconds before showing iphone-checkout.html.

Any help is appreciated.

Set a class to your img, say loading

<img class="loading" src="images/default.gif" /> 

Show and hide the same within click event.

$('.choose-iphone-btn').click(function() {
     $(".loading").show(); //get reference to element with its class and show it
     setTimeout( function() {
         $.get('iphone-checkout.html')
           .success(function(data) {
              $(".loading").hide();//hide once your ajax is success
              $('.iphone-pre-order-sales-content-info').html(data);
        });
     }, 3000);
});

You can also hide the loading in .done event, so that even in ajax failure, it doesn't block your view or keep displaying it.

$('.choose-iphone-btn').click(function() {
     $(".loading").show(); //get reference to element with its class and show it
     setTimeout( function() {
         $.get('iphone-checkout.html')
           .success(function(data) {
              $('.iphone-pre-order-sales-content-info').html(data);
           });
           .done(function() {
              $(".loading").hide();//hide once your ajax request is done
           });
      }, 3000);
 });

Create a class to display/hide the image. Initially set it to display:none.

Then use jquery addClass & removeClass method to show and hide the image

CSS

.displayNone{
  display:none
}

HTML

// added id & class to image tag
<img id="myImage" class="displayNone" src="images/default.gif" /> 

JS

$('.choose-iphone-btn').click(function() {
        // removing the class to display the image
        $("#myImage").removeClass("displayNone");
        setTimeout( function() {

            $.get('iphone-checkout.html')
             .success(function(data) {
                 $('.iphone-pre-order-sales-content-info').html(data);
                 // adding class back on to hide mage on success of ajax
                 $("#myImage").addClass("displayNone");
            });

        }, 3000);

    });