Html 在 iframe 页面内容加载时显示加载 gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12136788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show a loading gif while iframe page content loads
提问by Chris Zachary
I searched and tried various solutions to what I'm trying to achieve, to no avail...
我搜索并尝试了各种解决方案来实现我想要实现的目标，但无济于事......
I'm working on a photography website which has a high volume of images loading in an iframe, which takes a bit of time to load. I want to show a loading gif image in the iframe until the images have finished loading.
我正在一个摄影网站上工作，该网站在 iframe 中加载了大量图像，加载需要一些时间。我想在 iframe 中显示加载 gif 图像，直到图像加载完成。
Here is the website in question, http://www.chriszachary.com/portfolio
这是有问题的网站，http://www.chriszachary.com/portfolio
I'm using a javascript motion gallery to allow the user to control image scrolling with their mouse. The images do not scroll until the page is fully loaded. To help minimize confusion, I figured a loading gif image would be more efficient, but I can't pull it off. If you click any of the portfolio categories (wedding, engagement, portrait) you'll notice a significant wait time to load the images.
我正在使用 javascript 动画库来允许用户使用鼠标控制图像滚动。在页面完全加载之前，图像不会滚动。为了尽量减少混淆，我认为加载 gif 图像会更有效，但我无法实现。如果您单击任何投资组合类别（婚礼、订婚、肖像），您会注意到加载图像的等待时间很长。
If anyone could let me know how to achieve this within the iframe, please let me know. And if you could be specific on what code to use and where, I'm a novice :|
如果有人能让我知道如何在 iframe 中实现这一点，请告诉我。如果您可以具体说明要使用的代码和位置，我是新手：|
Thanks in advance, looking forward to an answer :)
在此先感谢，期待答案:)
回答by Jay
Replace the IFRAMEtag in that page with below HTML. The IFRAMEis covered with a DIVwhere the loading image (or any image) is found. The image is at the center of the DIVarea and its size can be up to 950x633 pixels. When the IFRAMEpage is loaded, the loading image will be hidden.
IFRAME用下面的 HTML替换该页面中的标记。在IFRAME覆盖有DIV其中装载图像（或任何图像）被发现。图像位于该DIV区域的中心，其大小最大可达 950x633 像素。当IFRAME页面加载时，加载图像将被隐藏。
What you need to change is the image URL for your site. You might also want to change the DIVbackground color (currently set to #FFF).
您需要更改的是您网站的图片 URL。您可能还想更改DIV背景颜色（当前设置为#FFF）。
<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
回答by Ramesh Narayan
You can use jquery to trigger when iframe is loaded
您可以使用 jquery 在 iframe 加载时触发
$('#iframeTest').on("load", function () {
console.log('iframe loaded'); //replace with code to hide loader
});
