搬码资源网广告位 搬码资源网广告位

为iFrame添加动态载入提示优化用户体验

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

平常开发网站避免不了使用 iFrame 框架,但是当网络环境不好时 iFrame 内容一直都是直勾勾的加载,并且未加载完成之前还会强行占据一大片空白区域,体验很不友好!昨天在制作展示导航 wordpress 插件时,把这个问题也一并处理了,其中涉及到了这个 iFrame 动态载入效果,现在记录一下,顺便分享。

完整代码:

<div style=”float: left;width: 205px;font-size: 13px !important;line-height: 20px;” id=”loading”>

<img style=”floa: left;height: 20px;width: 20px;” src=”/loading.gif” />

联盟导航加载中,请稍后…

</div>

<iframe id=”zgboke” onreadystatechange=stateChangeIE(this) onload=stateChangeFirefox(this) style=”visibility: hidden;padding: 0px; width: 100%; height=”0″ src=”http://zgboke.com/hutui.html” frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”></iframe>

<script language=”javascript”>

function stateChangeIE(_frame)

{

if (_frame.readyState==”interactive”)

{

var loader = document.getElementById(“loading”);

loader.innerHTML = “”;

loader.style.display = “none”;

_frame.style.visibility = “visible”;

}

}

function stateChangeFirefox(_frame)

{

var loader = document.getElementById(“loading”);

var f= document.getElementById(“zgboke”);

f.height=”512″;

loader.innerHTML = “”;

loader.style.display = “none”;

_frame.style.visibility = “visible”;

}

</script>

以下是依葫芦画瓢的方法:

①、在 iframe 代码之前先插入一个 div 用于 iframe 载入前的显示,除了 id 需要一一对应,其他自行发挥即可。

②、将 iframe 的高度设为 0,并在原有 iframe 的基础上插入加载前和加载后的函数调用

onreadystatechange=stateChangeIE(this)

onload=stateChangeFirefox(this)

③、如代码的 8~28 行新增 2 个 js 函数即可,注意上下元素 ID 需要一 一对应;

④、其中 22 和 23 行禁止 iframe 未加载完成的空白占位,只有加载完成之后,才会将 iframe 的高度还原为 512。

Ps:代码涉及的元素 ID 对应及 CSS 调节,请自行搞定,就不赘述了。

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11259.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?