使用javascript加载外部照片

Question

我正在尝试使用javascript设置图像对象的图像源。

我试过了

<img src="" id="image" alt="">
<p id="change">Change</p>

$("#change").click(function () {
  $("#image").attr("src", "some source");
});

问题是它似乎确实改变了src，但是如果在加载页面时没有加载图像，它就无法工作。所以我不能突然改变Stackoverflow的标识。这可能是真的吗？如何在更改源时加载图像？

Answer 1

几周前我遇到了类似的问题，我设法解决问题的最简单方法是加载你需要的所有图像，并将所有你不需要的图像设置为隐藏。然后，当触发导致更改的操作时，您可以更改要消失的动作和要显示的动作的图像可见性。

如果你安装了bootstrap，就像通过jQuery添加和删除类一样简单

<强> HTML

<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>

<强>的Javascript

$("#change").click(function () {
  $('#image1').addClass('hidden');
  $('#image2').removeClass('hidden');
});