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

网页中通过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:根据循环切换条件可以用document.getElementById("").src=""设置,或者juqery:("#id").attr("src","图片名称")。

河婆中学IMG CREW,揭西元老级舞团,创立于2005年,为揭西最早学习街舞与街头文化的组织之一。

简介

河婆中学IMG CREW,揭西元老级舞团,创立于2005年,为揭西最早学习街舞与街头文化的组织之一。风格以poppin为主,涵盖了LOCKING、hiphop、jazz、c-walk、LA style、 breaking等舞种,为揭西河婆最大学校街舞社团,致力于揭西地区hiphop文化的推广。原名G-force ,于2010 正式更名为IMG ,意为I'm g-force 。G 是一种引力,靠着这股心引力让他们紧紧的团结在一起,不可动摇G 也是上帝,在那里每个人都是自己的上帝。G 是一种生活的态度,引导他们前进的方向。

<HTML>

<HEAD>

<script type=text/javascript>

var img_idx=0

var img_list=new Array("手机471.jpg","手机469.jpg")

function next_img(){

img_idx++

img_idx%=img_list.length

return img_list[img_idx]

}

</script>

</HEAD>

<BODY>

<img src="手机471.jpg" onmouseover="this.src=next_img()"

onclick="this.src=next_img()"/>

</BODY>

</HTML>

扩展资料

for(var i = 0i<leni++){

var data = datas[i]

var nickname = data.nickname

var avatar = data.avatar

var li_item = ''

if(avatar == null){

// 只显示nickname

li_item =  '<li>'+

'<span class="lottery_name">' + nickname + '</span>'+

'</li>'

}else{

li_item =  '<li>'+

'<img class="lottery_icon" id="img'+i+'" />'+

'<span class="lottery_name">' + nickname + '</span>'+

'</li>'

//$('#img'+i).attr('src',avatar)

}

$('.lottery_main').append(li_item)

$('#img'+i).attr('src',avatar)

}

参考资料:百度百科 SRC


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11161728.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存