Question

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

我有以下内容。

系列图像文件

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

JS

var inter = window.setInterval(function(){play()},300);

function play(){
  $('#holder').attr('src','image'+index+'.png')
   index++;
   if(index==20){
       clearInterval(inter);  
   }
}

想法是播放一系列图像并使其看起来像动画。它完全适用于我和我的另外两台Chrome计算机。

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

我真的无法弄清楚发生了什么。任何人都可以帮我吗？非常感谢！

Answer 1

我不确定这是否是这种情况，但我有一次类似的问题，因为图像没有及时加载。尝试预加载它们。

链接一些信息： http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Answer 2

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

以下是一个简单示例： http://jsfiddle.net/D232R/2/

<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>

但是如果这是一个加载问题，我想你可以加载它们，将display:none;添加到所有这些，然后使用jQuery.toggle() http://api.jquery.com/toggle/

<强>更新

以下是切换方法的小提琴： http://jsfiddle.net/N9r5y/1/ 如果需要，您还可以添加一些不错的淡入淡出。

这里有一些缓和： http://jsfiddle.net/N9r5y/2/

Answer 3

你可以考虑使用css sprites，特别是如果你的图像很小。这将使您的浏览器只下载一个较大的图像而不是许多小图像。

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

http://css-tricks.com/css-sprites/对该技术和在线工具的一些链接有很好的解释。

如何在运行时更换图像源？

3 个答案: