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

Question

我有一个带有 on.click(function() {} 的按钮。点击函数内部是一个 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" /> 

3 秒后显示 iphone-checkout.html。

感谢任何帮助。

Answer 1

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

然后使用jquery addClass & 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);

    });