怎么用 javascript 做网页中的图片定时刷新

JavaScript011

怎么用 javascript 做网页中的图片定时刷新,第1张

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

具体的说，就是我要利用一个客户端软件，用同一个文件名不断的传送文件到 HTTP 服务器上，然后在网页中读取那个图片，并且定时刷新图片，但是网页不要刷新，那样应该怎么做？

解析:

<script>

function changesrc(){

var pic=document.getElementById('change')

var img='1.jpeg?'+new Date

pic.src=img

window.setTimeout(changesrc,10000)

}

window.onload=function(){

changesrc()

}

</script>

<img src=1.jpeg id="change" />

业务：采购业务流程中当财务人员打款后需要将打款流水图片上传到ftp服务器上。可是有时会上传出错。所以这里需要一个修改的图片的按钮。问题：当img的src的URL地址与之前相同（只更改图片，名称不变，不同图片相同名称）时，结果图片不变化，还是之前的图片。但通过chrome调试发现图片确实是变化的。那造成这个问题的原因时什么呢？方法：只需要每次刷新图片时，在img的src地址后面拼接一个随机数即可。例子：原有图片地址：<img src="http://img.boredou.com/1234556788.jpg" /> 修改后图片地址：<img src="http://img.boredou.com/1234556788.jpg?23333333" /> 原理：经过在浏览起端调试，发现当src的地址不变时，浏览器会从缓存里面取出来。而浏览器缓存的还是之前的图片。所以图片不会变化。 而当img的src中拼接了随机参数，那么浏览器会认为这是一张新的图片（或者说访问了不同的路径），浏览器每次访问都会访问服务器，而不会访问缓存里数据。

js实现更换图片：

<script language =javascript >

var curIndex=0

//时间间隔 单位毫秒

var timeInterval=5000

var arr=new Array()

arr[0]="1.jpg"

arr[1]="2.jpg"

arr[2]="3.jpg"

arr[3]="4.jpg"

arr[4]="5.jpg"

arr[5]="6.jpg"

arr[6]="7.jpg"

setInterval(changeImg,timeInterval)

function changeImg()

{

var obj=document.getElementById("showpic")

if (curIndex==arr.length-1)

{

curIndex=0

}

else

{

curIndex+=1

}

obj.src="image/"+arr[curIndex]

}

</script>

<img src="image/1.jpg" width="427" height="219" id="showpic" />