Question

我有一个on.click（function（）{}的按钮。在click函数内部是一个setTimeout（function（）{}，它将显示来自外部html文件的内容。

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

        });

});

我想要显示

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

在显示iphone-checkout.html之前

持续3秒。

感谢任何帮助。

Answer 1

创建一个类来显示/隐藏图像。最初将其设置为display:none。

然后使用jquery addClass＆amp;显示和隐藏图片的removeClass方法

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

    });

Answer 2

将课程设为img，说loading

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

在点击事件中显示和隐藏相同内容。

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

您还可以在hide事件中loading .done，以便即使ajax失败，也不会阻止您的观看或继续显示。

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

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

2 个答案: