javascript - Jquery代码在显示主要内容之前显示加载

Question

我正在我的页面上使用jquery，我希望当用户单击按钮时，图像将在主要内容出现之前显示加载 1 秒

这是我的代码:

      <script>
      $(document).ready(function(){
          $("#UseractivityLog").click(function(){
          $(".UserProfileLogs-cont").html("<img src='image/loading.gif'/>");
//Then for 1/2 seconds this UserProfileLogs will display
          $(".UserProfileLogs").toggle();
      });  
          $("#IdealLog").click(function(){
          $(".UserProfileLogs-con").toggle();
      });  
      });
      </script>

这是我的 HTML 部分

<a href="#" id="UseractivityLog">Logs</a>
<div id="UserProfileLogs-cont">
<div id="IdealLog"></div>
<div id="UserProfileLogs"></div>
</div>

拜托，我会欣赏 jsfiled 示例

Answer 1

您有一些选择器不一致的情况，请确保您正在观看这些内容(# 而不是 .)。

对于暂停，请使用setTimout():

$(document).ready(function(){
    $("#UseractivityLog").click(function(){
        $("#UserProfileLogs-cont").html("Loading...");
        setTimeout(function() {
            $("#UserProfileLogs-cont").html("<img src='http://placehold.it/350x150'>");
        }, 1000);

        //Then for 1/2 seconds this UserProfileLogs will display
        $(".UserProfileLogs").toggle();
    });  
    $("#IdealLog").click(function(){
        $("#UserProfileLogs-cont").toggle();
    });  
});

fiddle :https://jsfiddle.net/Lqgum8hu/

对于您的评论:

//Then for 1/2 seconds this UserProfileLogs will display

使用另一个超时:

setTimeout(function() {
    // Whatever...
}, 500); 

我稍微更改了您的 HTML 来展示示例，但它可以更改为您想要的任何内容，而无需更改 Javascript。