在加载iframe页面内容时显示加载gif [英] Show a loading gif while iframe page content loads

问题描述

我搜索并尝试了各种解决方案，试图实现我的目标，无济于事......

我正在拍摄一个摄影网站，该网站有一个在iframe中加载大量图像，这需要一些时间来加载。我想在iframe中显示一个加载的gif图像，直到图像加载完成。

以下是有问题的网站 http://www.chriszachary.com/portfolio

我使用javascript动作图库允许用户使用鼠标控制图像滚动。在页面完全加载之前，图像不会滚动。为了最大限度地减少混淆，我认为加载gif图像会更有效率，但我无法将其取消。如果您点击任何投资组合类别（婚礼，订婚，肖像），您会发现加载图像的时间很长。

为了在iframe中实现这一点，请让我知道。如果您可以具体说明使用什么代码以及在哪里，我是一个新手：|

预先感谢，期待答案：）

解决方案

用下面的HTML替换该页面中的 IFRAME 标记。 IFRAME 覆盖了一个 DIV ，其中找到了加载图像（或任何图像）。该图像位于 DIV 区域的中心，其大小可高达950x633像素。当加载 IFRAME 页面时，加载的图片将被隐藏。

你需要改变的是图片您的网站的网址。您可能还需要更改 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.htmlwidth =950height =633scrolling =nonoresize frameborder =0onload =document.getElementById 'loadImg'）的style.display = '无';>< / iframe中> 
  

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.

Here is the website in question, 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.

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

Thanks in advance, looking forward to an answer :)

解决方案

Replace the IFRAME tag in that page with below HTML. The IFRAME is covered with a DIV where the loading image (or any image) is found. The image is at the center of the DIV area and its size can be up to 950x633 pixels. When the IFRAME page is loaded, the loading image will be hidden.

What you need to change is the image URL for your site. You might also want to change the DIV background color (currently set to #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>

这篇关于在加载iframe页面内容时显示加载gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！