Jquery动态改变图片IMG的src地址并避免浏览器缓存的方法实例

上传图片的时候需要在上传完成后动态更新图片地址(img的src)显示出图片,由于是可以多次上传的看效果的,所以要能够显示后更新同名的图片地址也能够正常显示,如果只是单纯使用$(“#pic_url”).attr(“src”, src); 则只有第一次才会更新,后面同样地址由于浏览器(测试的是火狐)缓存原因调用了这句话图片也不会更新的。解决浏览器缓存的办法就是万能的随机数了,即在图片地址后面加个随机数,而什么随机数最好呢?当然是时间戳了。获取时间戳最简单的方法就是Math.round(new Date().getTime()/1000)。

<img id=”pic_url” src=”http://xxxx/upload_img/temp/4.jpg?round=1407575252″ height=”120″ width=”150″>

jquery更新img是src不能只有用$(“#pic_url”).src = src;,要用$(“#pic_url”).attr(“src”, src);

实例代码: 

var src = ‘<?=base_url() ?>’ + data.img+”?round=”+Math.round(new Date().getTime()/1000);
$(“#pic_url”).attr(“src”, src);
//$(“#pic_url”).src = src;

扩展知识:

JS中timestamp的获取与转换:Math.round(new Date().getTime()/1000);
new Date() 初始化一个日期时间对象,get.Time()取毫秒数,所以要取1000。Math.round是初始化一个数学方法,类似于php的ceil方法。

timestmp转Date:
Date.prototype.format = function(format) {
var o = {
“M+”: this.getMonth() + 1,
// month
“d+”: this.getDate(),
// day
“h+”: this.getHours(),
// hour
“m+”: this.getMinutes(),
// minute
“s+”: this.getSeconds(),
// second
“q+”: Math.floor((this.getMonth() + 3) / 3),
// quarter
“S”: this.getMilliseconds()
// millisecond
};
if (/(y+)/.test(format) || /(Y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + “”).substr(4 – RegExp.$1.length));
}
for (var k in o) {
if (new RegExp(“(” + k + “)”).test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : (“00” + o[k]).substr((“” + o[k]).length));
}
}
return format;
};
function timestampformat(timestamp) {
return (new Date(timestamp * 1000)).format(“yyyy-MM-dd hh:mm:ss”);
}

暂无评论

发表评论

快捷键:Ctrl+Enter