Question

我需要更改图像源onClick，因为我创建了jquery点击，图像源在点击完成之前不会生效

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.bg  {
    background-image: url("paper.gif");
    background-color: #cccccc;
}
</style>

<script>
$(document).ready(function(){
    $("a").click(function(){
        //alert($("#img").attr("src"));
        $("#img").attr("src","https://www.w3schools.com/images/driveicon.png");
        //alert($("#img").attr("src"));
        $("h1").attr("class","");
        //alert('hi');
        sleep(10000000);
        //alert('hi1');
    });
});
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}
</script>
</head>
<body>
<h1 class="bg">Hello World!</h1>
<a>
<img id="img" src="https://tpc.googlesyndication.com/daca_images/simgad/16193915113295470335?w=195&h=102"/>
</a>
<br>
<p id="img1"/>
</body>
</html>

在上面的代码中，图像src在点击几秒后发生了变化。

我需要在点击后立即更改图片来源。

提前致谢

Answer 1

您的问题是因为Javascript是单线程的。因此，当sleep()函数中的大量循环运行时，其他任何事情都无法发生。反过来，这意味着DOM没有时间来呈现您对src元素的img所做的更改，并且只有在循环终止后才会出现。

解决这个问题的方法是使用JS提供的一个定时器函数。在您的情况下，setTimeout()将是最合适的：

$(document).ready(function() {
  $("a").click(function() {
    $("#img").attr("src", "https://www.w3schools.com/images/driveicon.png");
    $("h1").attr("class", "");
    setTimeout(doSomethingElse, 1000);
  });
});

function doSomethingElse() {
  console.log('Doing something else here...');
}

.bg {
  background-image: url("paper.gif");
  background-color: #cccccc;
}

#img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="bg">Hello World!</h1>
<a>
  <img id="img" src="http://i.imgur.com/HazyBBo.jpg" />
</a><br />
<p id="img1" />

在事件完成之前，jquery未完成图像源更改

1 个答案: