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

我有按钮，有一个on.click（函数（）{}。里面的点击功能是的setTimeout（函数（）{}，将显示从外部HTML文件中的内容。如何在jQuery中显示内容之前显示setTimeout图片？

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

     }); 

});

我想显示iphone-checkout.html前显示

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

3秒。

任何帮助表示赞赏。

来源

2016-11-28 Conan Carroll

在'setTimeout（）'之前添加对$（“img”）。show（）的调用，并在Ajax成功处理函数中调用'.hide（）'？ – nnnnnn

你能为我写代码吗？ –

@redshot先试试自己，这是学习的最佳方式。做研究，你知道你需要的功能。看看jQuery API和文档，他们有详细的信息解释这些功能。 –

设置一个类来您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); 
});

来源

2016-11-28 04:52:05

谢谢大师！ –

随时...快乐编码.. :) –

创建一个类以显示/隐藏图像。最初将其设置为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" />

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

    });

来源

2016-11-28 04:53:04 brk

tnx，很好的答案兄弟.. –

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

回答

相关问题