Question

我昨天发布了一个关于让它发挥作用的问题。今天，我得到它的工作，需要一些帮助来调整它。：）

我已经构建了一个互动实验练习，用户点击该问题来检索答案。我修改了它，以便在答案出现之前有一段延迟。为了进行测试，将其设置为1，我将增加生产。

目前，当你点击一个li元素时，我使用.after（）插入一个加载gif，然后在延迟时隐藏它（并显示下一个div）。代码有点笨拙，但主要的问题是如果你在加载完成之前再次点击li元素，它只会添加另一个gif然后将整个内容搞砸。

我该如何解决？测试图像是否已经插入，如果是这样，或什么都不做？

沙箱：http://sed.freeshell.org/labtest.html

代码：

<!doctype html>
<html>

<head>
<title>test</title>
<link rel="stylesheet" content="text/css" href="cssnew.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".step").next().hide();
  $("li").click(function(){
      $(".answer").hide(); //hide all answers on the page
      $(this).next().delay(1000).slideDown(); //display answer after 1s
      $(this).after('<img src="/ajax-loader.gif" />'); //insert loading gif
      $(this).next().delay(1000).hide(0); //after inserting the gif, this.next now refers to the gif, hide it after 1s
      $("li").show(); //in case there were nested li elements, show them
    });
  $("h1").click(function(){
      $(".answer").show();
    });
});
</script>

<style>
body {
background: #fff8f0;
font-family: "Helvetica","Arial","sans-serif";
font-size: 1em;
}
h1,h2,h3,h4,h5,h6 { font-family: "Trebuchet MS","Verdana","Helvetica","sans-serif"; margin:0}
h4 { color: #999; margin-top: 10px;}
hr { border: 1px solid #999; }
code { font-weight: bold; font-family: "PT Mono","Consolas","Lucida Console","Courier New","Courier","monospace"; font-size: 1.1em; }
.answer {
display: inline-block;
background: #333;
color: #999;
margin-right: auto;
padding: 5px 20px;
font-family: "PT Mono","Consolas","Lucida Console","Courier New","Courier","monospace";
font-size: 1.1em;
}
.key {color: #0a0}
.var {color: #c6c}
.cmd {color: #eee}
.cmt {color: #0aa}

</style>
</head>

<body>
<ol>
<li class="step">Use the <code>cp</code> command to copy file1 to file2.</li>
<div class="answer">
$ <span class="cmd">cp file1 file2</span>
</div>
</ol>
</body>

</html>

Answer 1

希望这有点帮助！

我们已经可以在HTML中添加我们需要的内容，而不是在jQuery中添加我们需要的内容，而只是在需要时显示和隐藏它。

<强> Fiddle

＆＃13;

$('.question').click(function() {
    
    $(this).next('.answer-container').slideDown().children('.loading').delay(1500).fadeOut(function() {
       $(this).siblings('.answer').fadeIn();
    });
    
});

＆＃13;

.list-unstyled {
  list-style-type: none;  
}
.answer {
   display: none; 
}
.loading {
    display: block;
    width: 220px;
    height: 19px;
    background: url('http://sed.freeshell.org/ajax-loader.gif');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="questions list-unstyled">
    <li class="question">Question 1</li>
    <li class="answer-container" style="display: none;">
        <div class="loading"></div>
        <span class="answer">Answer: Whoop</span>
    </li>
</ul>

＆＃13;

Answer 2

我会为您要加载的图片添加一个类或ID，并检查以确保图片在加载之前不可见。

添加一个名为loader的类：

 $(this).after('<img class="loader" src="/ajax-loader.gif" />'); //insert loading gif

在加载前验证元素是否可见

  if($('.loader').is(':visible') == false){
  [your image loading 
   }

Fiddle

jQuery - 使用加载gif延迟显示

2 个答案: