Question

我在HTML页面中有两个框架。

在帧加载期间，我想显示一个加载图标，当帧完成加载时我想隐藏它。

我试过这种方式

<h5 class="element-title">Indices </h5>
  <iframe width="100"  height="200" src="http://www.umich.edu" onload="onLoadHandlerforindices();" >
</iframe>

<h5 class="element-title">My Data </h5>
<iframe src="http://www.w3schools.com" onload="onLoadHandlerformydata();" ></iframe>
</iframe>

<img id="loadImg" src="http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif" alt="loading...">

$( document ).ready(function() {
    $("#loadImg").hide();
});

function onLoadHandlerforindices()
{
    $("#loadImg").show();
}

function onLoadHandlerformydata()
{
    $("#loadImg").show();
}

但图标未显示

这是我的小提琴

http://jsfiddle.net/11Lnatr6/3/

Answer 1

您当前的逻辑应该反转。加载目标元素后触发onload事件。尝试显示图像，并在加载iframe时隐藏它！ jsFiddle

$( document ).ready(function() {
    $("#loadImg").show();
});

function onLoadHandlerforindices()
{


    $("#loadImg").hide();
}

function onLoadHandlerformydata()
{


    $("#loadImg").hide();
}

Answer 2

onload=""事件在页面加载完成后触发，而不是在开始时触发。

倒计时加载并隐藏图像时需要加载多少iframe：

<h5 class="element-title">Indices </h5>
  <iframe width="100"  height="200" src="http://www.umich.edu" onload="onFrameLoaded();" >
</iframe>

<h5 class="element-title">My Data </h5>
<iframe src="http://www.w3schools.com" onload="onFrameLoaded();" ></iframe>
</iframe>

<img id="loadImg" src="http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif" alt="    loading...">    

<script type="text/javascript">
var iframesToLoad = 2;
function onFrameLoaded() {
    iframesToLoad--;
    if ( iframesToLoad == 0 )
        $("#loadImg").hide();
}
</script>

如何在加载框架时显示加载图标

2 个答案: