刷新iframe时如何避免闪烁？

Question

刷新iframe时如何避免闪烁？

首先,即使我的问题是关于如何刷新<iframe>没有闪烁,任何其他可以解决我的问题的建议都将受到欢迎.

问题:我有一个发布"主"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>

Run Code Online (Sandbox Code Playgroud)

第二个网页是这样的:

<!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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

编辑1:大多数Android浏览器不支持相似的图像大小,就像我的例子.使用绝对像素值.

Answer 1

bfa*_*tto 5

重新加载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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，6 月前
查看次数：	5584 次
最近记录：	12 年，6 月前