jQuery - 为什么 attr.src 不改变？

Question

我有一个图像，当单击时我想更改它，然后让浏览器跳转到新的 URL。我使用 .one，以便用户只能单击图像一次。

     jQuery('#launch_button').one('click', function() {
      jQuery("#launch_button").attr("src", "images/button_launch2_grey.png");
      window.location.href = 'test.html';
     });

如果我注释掉 window.location.href，图像会正确更改。如果我执行相反的操作并注释掉 attr 更改，则 window.location.href 可以工作，但图像不会首先更改。在执行 window.location.href 之前，如何让第一行(attr 更改)完成/工作？

Answer 1

当你运行window.location.href时您更改用户正在查看的页面。

您对 DOM 所做的更改只会在当前页面有效；一旦用户离开，更改就会丢失。

重定向至test.html应该接近瞬时。图像在渲染之前必须首先加载。您应该将 DOM 中的图像包含在隐藏的 <img /> 中标记以确保在显示之前加载它(或通过构造 new Image() 并将其 src 设置为 JavaScript 中的图像来预加载它)；但即便如此，您也只能看到它一瞬间。