html – 显示加载gif,而iframe页面内容加载

搜索并尝试了各种解决方案,我想要实现,无济于事

我正在一个摄影网站上工作,该摄影网站的大量图像加载在iframe中,需要一点时间才能加载.我想在iframe中显示加载gif图像,直到图像加载完毕.

这是有关网站,http://www.chriszachary.com/portfolio

我正在使用一个javascript运动库来允许用户使用鼠标控制图像滚动.在页面完全加载之前,图像不会滚动.为了帮助减少混乱,我认为加载gif图像会更有效率,但我无法拉开它.如果您点击任何投资组合类别(婚礼,参与,肖像),您会注意到加载图像的重要等待时间.

如果有人能让我知道如何在iframe中实现这一点,请让我知道.如果你可以具体说明使用什么代码,在哪里,我是一个新手:|

提前感谢,期待一个答案:)

解决方法

用下面的HTML替换该页面中的IFRAME标签. IFRAME被DIV覆盖,其中找到加载图像(或任何图像).图像位于DIV区域的中心,其大小可高达950×633像素.加载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.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些