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

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

我已经试过这样

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

来源

2015-10-15 Pawan

'onload'在加载后触发。 –

您当前的逻辑应该被反转。加载目标元素后，会触发onload事件。尝试显示图像，并在加载iframe时隐藏它！页面加载完成后，而不是在开始时触发jsFiddle

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

function onLoadHandlerforindices() 
{ 


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

function onLoadHandlerformydata() 
{ 


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

来源

2015-10-15 10:22:21 kosmos

感谢您的小提琴，但是当框架被加载时我看不到加载图标。 – Pawan

如果我理解的很好，您希望在加载iframe时显示加载gif *，并且在加载时隐藏gif。这是正确的吗？ – kosmos

yes correct ... – Pawan

的onload=""事件。

倒计时多少I帧必须加载和隐藏图像时的所有加载：

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

来源

2015-10-15 10:31:59

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

回答

相关问题