Javascript 如何在运行时替换图像源？

我的应用程序中有一个非常奇怪的问题

我有如下的一些东西

图像文件系列

image1.png
image2.png
image3.png
image4.png
image5.png
…more

JS

其想法是播放一系列图像，使其看起来像动画。它完全可以在我和另外两台chrome电脑上运行

然而，某些具有相同chrome版本的计算机似乎无法显示每个图像。图像文件在运行时会更改，但浏览器仅显示第一个图像，并且仅在某些计算机中发生

---

我真的不知道会发生什么。有人能帮我吗？非常感谢

我不确定这里的情况是否如此，但我曾经遇到过类似的问题，因为图像没有及时加载。尝试预加载它们

链接一些信息：

---

我不确定这里的情况是否如此，但我曾经遇到过类似的问题，因为图像没有及时加载。尝试预加载它们

链接一些信息：

---

您不需要jQuery来更改图像src。只需使用基本的JavaScript

这里有一个简单的例子：

<input type="button" value="change image" onclick="changeImage()">
<br>
<img id="img1" src="http://i24.photobucket.com/albums/c42/papayacrazy/gifs/tumblr_ma9phigvTK1rxw3fco1_500.gif">

<script>
  changeImage=function()
  {
    document.getElementById("img1").src = "http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
  }
</script>

changeImage=函数（）
{
document.getElementById（“img1”）.src=”http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
}

但如果是加载问题，我想您可以全部加载，添加

display:none到所有这些，然后使用
jQuery.toggle（）

<input type="button" value="change image" onclick="changeImage()">
<br>
<img id="img1" src="http://i24.photobucket.com/albums/c42/papayacrazy/gifs/tumblr_ma9phigvTK1rxw3fco1_500.gif">

<script>
  changeImage=function()
  {
    document.getElementById("img1").src = "http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
  }
</script>

更新：

这里有一个切换方法的提琴：如果需要，您还可以添加一些漂亮的淡色

这里有一些简化：
您不需要jQuery来更改图像src。只需使用基本的JavaScript

<input type="button" value="change image" onclick="changeImage()">
<br>
<img id="img1" src="http://i24.photobucket.com/albums/c42/papayacrazy/gifs/tumblr_ma9phigvTK1rxw3fco1_500.gif">

<script>
  changeImage=function()
  {
    document.getElementById("img1").src = "http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
  }
</script>

这里有一个简单的例子：

<input type="button" value="change image" onclick="changeImage()">
<br>
<img id="img1" src="http://i24.photobucket.com/albums/c42/papayacrazy/gifs/tumblr_ma9phigvTK1rxw3fco1_500.gif">

<script>
  changeImage=function()
  {
    document.getElementById("img1").src = "http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
  }
</script>




changeImage=函数（）
{
document.getElementById（“img1”）.src=”http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
}

但如果是加载问题，我想您可以全部加载，添加
display:none到所有这些，然后使用
jQuery.toggle（）

<input type="button" value="change image" onclick="changeImage()">
<br>
<img id="img1" src="http://i24.photobucket.com/albums/c42/papayacrazy/gifs/tumblr_ma9phigvTK1rxw3fco1_500.gif">

<script>
  changeImage=function()
  {
    document.getElementById("img1").src = "http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
  }
</script>

更新：

这里有一个切换方法的提琴：如果需要，您还可以添加一些漂亮的淡色

<>这里有一些放松：<强> <强> 
 你可以考虑使用CSS精灵，特别是当你的图片很小的时候。这将使您的浏览器只下载一个较大的图像，而不是许多较小的图像

<input type="button" value="change image" onclick="changeImage()">
<br>
<img id="img1" src="http://i24.photobucket.com/albums/c42/papayacrazy/gifs/tumblr_ma9phigvTK1rxw3fco1_500.gif">

<script>
  changeImage=function()
  {
    document.getElementById("img1").src = "http://i756.photobucket.com/albums/xx202/Blairewolfe/fail.jpg";
  }
</script>

您需要将所有单个较小的图像重新格式化为一个较大的图像。然后使用css更改img元素的属性，以仅显示适当的图像片段。有几个免费的在线版本可以帮助您创建图像文件

有很好的解释技术和一些链接到在线工具。
你可以考虑使用CSS精灵，特别是当你的图片很小的时候。这将使您的浏览器只下载一个较大的图像，而不是许多较小的图像
您需要将所有单个较小的图像重新格式化为一个较大的图像。然后使用css更改img元素的属性，以仅显示适当的图像片段。有几个免费的在线版本可以帮助您创建图像文件

对该技术进行了很好的解释，并提供了一些联机工具的链接。
在发生故障的计算机上，控制台中是否有错误？在发生故障的计算机上，控制台中是否有错误？