HTML中的IFrame

Question

我在html中使用iframe。将不同的html页面加载到iframes.in html页面我有图像。每当我将图像加载到iframe中时，我都会闪烁。

我们可以通过使用Iframe来停止闪烁

怎么办？

Answer 1

嗯，我不完全确定你想要摆脱什么样的闪烁，但我想它与浏览器加载有关，然后用图像显示你的新页面。

除了在背景上将下一张图片加载到另一张iframe然后在当前可见和新加载的iframe之间切换之外，我无法想到任何好方法。

更大的问题是，为什么你需要使用iframe？你是从一个你不拥有的网站上加载的东西吗？如果没有，请考虑ajax和其他此类技术。

Answer 2

您可以采取一些措施来帮助解决这个问题。

首先，确保指定图像的宽度和高度。然后，浏览器将为图像保留空间，而不是在知道图像大小时调整保留空间的大小。

如果您想提供一个示例，我们可以在必要时讨论预加载。

Answer 3

您可以通过向。添加onLoad回调事件来避免闪烁。一旦你onLoad回调激发，你就可以淡入iframe及其内容。这就是Lazy Loading的工作原理。例如：

<iframe id="ifrm" src="http://www.example.com" onload="showImage()"></iframe>

在上面的示例中，Iframe将呈现您的内容。一旦上面的iframe完成加载，它将尝试调用一个名为showImage（）的函数。您所要做的就是在脚本文件中定义showImage。您现在可以使用此函数来查找iframe DOM节点并更改样式以淡入或显示它（显示：块）。例如：

<script>
 function showImage() {
  var iframe = document.getElementById('ifrm'); 
  iframe.style.opacity = 1; // using opacity. You can transition this
  iframe.style.display = 'block' // using display. No transition
 }

</script>

如果您想将其淡入，可以在iframe中添加一些css，如下所示。例如：

#ifrm {
  opacity: 0; // Before the iframe load, make sure it is not visible
  transition: 0.3s // This will make your iframe fade in on load
}

希望这有帮助。