使用 Java Script 和/或 jquery 更新图像答案

【问题标题】：Updating images with Java Script and or jquery使用 Java Script 和/或 jquery 更新图像
【发布时间】：2013-10-16 00:08:20
【问题描述】：

我在尝试刷新相机图像时遇到问题。第一张图片加载正常，以下图片未加载。但是，当在浏览器中刷新图像时，图像确实会刷新，因此它应该只是 java 脚本的问题。在发布我的问题之前，我已经尝试了几个脚本。我可以使这个脚本适用于其他静态图像，这让我相信提供图像的服务器以某种方式拒绝图像刷新。最新的脚本是...

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body> 
<script type="text/javascript">
<!--
var refreshrate=1;                 //SECONDS BETWEEN REFRESH
var image="http://71.33.210.85/cam0.jpg";     //IMAGE NAME
var imgheight=240;                   //IMAGE HEIGHT
var imgwidth=320;                 //IMAGE WIDTH
function refresh(){
document.images["pic"].src=image+"?"+new Date();
setTimeout('refresh()', refreshrate*1000);}
document.write('<IMG SRC="'+image+'" ALT="Alternate Text" NAME="pic" ID="pic"        WIDTH="'+imgwidth+'" HEIGHT="'+imgheight+'" STYLE="border: 1px solid Black;">');
if(document.images)window.onload=refresh;
// -->
</script>
</body>
</html>

【问题讨论】：

我会不惜一切代价避免将字符串传递给 setTimeout
看看stackoverflow.com/questions/165253/…
在页面加载完成后执行的 document.write 也会覆盖页面，或者写一个新页面，或者不起作用 - 不确定你是要每次都覆盖它还是添加新图像

标签： javascript image refresh

【解决方案1】：

可能URL后面粘贴的日期格式不是代码期待服务器端。（虽然你可能已经预料到了）

document.images["pic"].src=image+"?"+new Date();

在控制台中运行它会给我

"http://71.33.210.85/cam0.jpgTue Oct 08 2013 23:17:01 GMT+0200 (Romance (zomertijd))"

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).on('ready', init);
        function init(){
            var i = 0;
            imageSrc = 'http://somedomain/project/';
            $('#imageDiv').append('<img src="'+imageSrc+i+'.png" alt="some text">');
            setTimeout(function(){
                i++;
                $(document).find('#imageDiv img').attr('src', imageSrc+i+'.png');

            }, 3000);
        }
    </script>
</head>
<body>`enter code here`
<div id="imageDiv">

</div>
</body>
</html>

你能试试这个脚本吗，

【讨论】：

感谢您的快速回复...我在解决方案中尝试了 RafH 的建议，但这刷新了相同的图像。当我尝试 Sunnycr4 的建议时，第一张图片永远不会加载。如果您在71.33.210.85/cam0.jpg 查看此图像，您可以通过刷新浏览器来刷新此图像，但是我尝试在不刷新页面的情况下更新图像的每个脚本都失败了。缓存？不知道是什么阻止它被更新。
我还注意到在检查 chrome 中的元素时，第一个图像加载，然后后续图像返回为 GET "error 400 bad request text/plain" 第一个图像加载 GET "200 OK image /jpeg"