网页中通过js修改img的src属性刷新图片

JavaScript017

网页中通过js修改img的src属性刷新图片,第1张

业务:采购业务流程中当财务人员打款后需要将打款流水图片上传到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的话,通过var

image

=

document.getElementById('imageId')或document.images['..']获得image元素,然后使用image.style.width=***和image.style.height=***就可以了.如果使用jquery的话就很简单了.$('图片选择器').css({width:

***,

height:

***})或者.width(***).height(***).

楼主应该用的是for循环,由于for循环执行时间太短,所以是乎看不到前两次执行结果,只能得到最后一条结果。。。

解决方案:用 setTimeout(函数名,间隔时间)

<script type="text/javascript">

var i = 0

function changeimg() {

i++

alert(i)//设置你要改变的图片

if (i <3) {

setTimeout(changeimg, 1000)//间隔一秒执行changeimg

}

}

changeimg()

</script>