如何在運行時更換圖像源？

我有類似以下內容。

圖像文件

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); 
    } 
}

的想法是打一系列的圖像，並使它看起來像一個動畫。它完全適用於我和其他兩臺電腦。

但是，具有相同鍍鉻版本的某些計算機似乎無法顯示每個圖像。圖像文件在運行時發生變化，但瀏覽器只顯示第一張圖像，而且只發生在某些計算機上。

我真的搞不清楚會發生什麼。任何人都可以幫助我嗎？非常感謝！

來源

2014-02-11 Links

在失敗的計算機上，控制檯中是否有任何錯誤？ –

我不確定這是否是這種情況，但我曾經遇到類似的問題，因爲圖像沒有及時加載。嘗試預加載它們。

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

來源

2014-02-11 23:25:57 Xyzk

您不需要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/

UPDATE：

這裏是一個切換方法的小提琴：http://jsfiddle.net/N9r5y/1/如果你願意，你也可以添加一些不錯的淡入淡出。

這與一些寬鬆：http://jsfiddle.net/N9r5y/2/

來源

2014-02-11 23:36:09 gfrobenius

你可以考慮使用CSS精靈，特別是如果你的圖片是小的。這將使您的瀏覽器下載一個更大的圖像，而不是許多小的圖像。

您會將所有單個較小的圖像重新格式化爲一個較大的圖像。然後使用css更改img元素的屬性，以僅顯示適當的圖像片段。有幾個免費的在線版本可以幫助您創建圖像文件。

http://css-tricks.com/css-sprites/對技術和一些在線工具的鏈接有一個很好的解釋。

來源

2014-02-11 23:53:25

如何在運行時更換圖像源？

回答

相關問題