html刷新图片
文章目录
- 前言
- 网页整体刷新
- 改变图像的url
- 备注
前言
海思3516的一个开发板，不断的采集图像编码为jpeg，保存为同一个文件。打算用网页实现查看视频的效果，需要前端能够自动刷新。
目前找到了两个方法，一个是网页的不断刷新，一个是页面内图像元素的不断刷新。
网页整体刷新
使用meta标签让浏览器不断刷新界面，和手动点刷新效果一样。
<meta http-equiv="refresh" content="1">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1">
<title>test</title>
</head>
<body><img id="pic" src="snap_chn1.jpg" />
</body>
</html>改变图像的url
使用setInterval不断改变图像的地址，这里加了个时间确保浏览器会去刷新，不加的话好像不变。
可以用浏览器去调试看url是不是自己想要的，有没有设置对。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body><img id="pic" src="snap_chn1.jpg" /><script>setInterval(function(){var tmpImage = new Image();tmpImage.src = "snap_chn1.jpg"+"?t="+Math.random();document.getElementById("pic").src = tmpImage.src;}, 1000);</script>
</body>
</html>
备注
上面方法都可以刷新图像，但是实际使用的效果有些不理想，图像很多时候刷不出来，不知道是不是使用的http服务器有问题，不过也聊胜于无吧。