仅当图像完全可用时，每秒刷新一次图像 - Refreshing image every second only if its fully available

Refreshing image every second only if its fully available

本文关键字：图像刷新一次 | 更新日期: 2023-09-27

我遇到了一些问题。我想通过http获取一个实时图像，并将其保存在我的网络服务器上。使用javascript，我每秒都会刷新保存的图像。但是当javascript刷新并且图像没有完全保存时，我只看到半个图像（没有完全加载的图像）。

有办法处理这个问题吗？例如，只在保存任务完成时显示图像？如果不显示旧的"缓存"图像，直到有新的图像可用。

我的php文件访问图片来源：

$path = realpath(dirname(__FILE__));
for ($i = 0; $i < 59; ++$i) {
    copy('http://<<<IP>>>/livepicture.jpg', $path.'/livepicture.jpg');
    sleep(1);
}

我的html文件刷新图像：

<script language="javascript" type="text/javascript" >
function ChangeMedia(){
    var d = new Date();
    var t = d.getTime();
    document.getElementById('camara').src = "livepicture.jpg?"+t;
}
var reloadcam = setInterval("ChangeMedia()",1000);
</script>
<img src="livepicture.jpg" alt="Loading..." name="camara" id="camara" />

您需要修改以下代码来复制图像文件，并且只有在下载后才能替换以前的文件。

$path = realpath(dirname(__FILE__));
for ($i = 0; $i < 59; ++$i) {
    copy('http://<<<IP>>>/livepicture.jpg', $path.'/temp.jpg');
    rename($path.'/temp.jpg', $path.'/livepicture.jpg');
    sleep(1);
}

您可以尝试使用ajax请求和图像的onload事件，当您的php响应良好时刷新页面