Question

首先，即使我的问题是关于如何刷新<iframe>而没有闪烁，也欢迎任何其他可以解决我的问题的建议。

问题：我有一个发布＆＃34; main＆＃34; HTML页面。同时，它拍摄照片（比如每秒一张）并将它们保存在硬盘上。我希望图片显示在网页上并刷新。

找到解决方案：我使用<iframe></iframe>范围，我将另一个页面放在仅包含图像的位置。然后定期刷新第二页。因此，整个页面不刷新，只有图像帧。问题是这个解决方案会在每次刷新时出现闪烁现象。

这是主页面的代码（稍微压缩）：

<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">

<!-- RIGHT HERE! -->
<iframe src="image.html" width="640" height="480" frameborder="0"></iframe>

</td></tr></table>
</body></html>

，第二个网页是这样的：

<!DOCTYPE html><html><head>
<script type="text/javascript">
<!--
function f( t )
{
    setTimeout( "location.reload( true );", t );
}
-->
</script>
</head>
<body bgcolor="#000000" onload="JavaScript:f( 1000 );">
<img src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</body>
</html>

我是JavaScript的初学者，所以我不假装这段代码很好，甚至可以通过。随意给我一些建议。

现在，是否可以重新加载而不会闪烁？我读到，页面没有完全加载时会出现闪烁。我还读到了在加载时间等时打开和关闭的隐藏帧。但我找不到一个好的解决方案。

另外，我知道有些像AJAX这样的技术存在，但我对它们的了解不多。如果有必要，请随时建议我使用它们，我可以快速学习......

编辑1：大多数Android浏览器都不支持相对图片大小，就像我的例子一样。使用绝对像素值。

Answer 1

重新加载iframe将始终闪烁。但是你也不需要ajax，只需要一个计时器和一个避免缓存的技巧：

<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">

<div>
    <img id="theimg" src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</div>

</td></tr></table>

<script type="text/javascript">
var theimg = document.getElementById("theimg");
var theurl = "../images/myimage.png";
setInterval(function() {
    theimg.src = theurl + '?t=' + new Date().getTime();
}, 1000);
</script>
</body></html>

刷新iframe时如何避免闪烁？

1 个答案: