网页中通过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 是一种生活的态度,引导他们前进的方向。

下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的

<!DOCTYPE html>

<html>

<head>

<script>

function changeSrc()

{

document.getElementById("myImage").src="hackanm.gif"

}

</script>

</head>

<body>

<img id="myImage" src="compman.gif" width="107" height="98">

<br><br>

<input type="button" onclick="changeSrc()" value="Change image">

<p><b>Note:</b>The src property can be changed at any time.

However, the new image inherits the height and width

attributes of the original image,

if not new height and width properties are specified.</p>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存