向iframe载入html,为iFrame添加动态载入效果，提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾的加载，并且未加载完成之前还会强行占据一大片空白区域，体验很不友好！昨天在制作展示导航WordPress插件时，把这个问题也一并处理了，其中涉及到了这个iFrame动态载入效果，现在记录一下，顺便分享。

先展示下效果：

加载中：

完成后：

以下是完整代码：

联盟导航加载中，请稍后...

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

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

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

onreadystatechange=stateChangeIE(this)

οnlοad=stateChangeFirefox(this)

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

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

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

向iframe载入html,为iFrame添加动态载入效果，提高用户体验相关推荐

Python 动态载入模块
lib文件夹下有test.py文件: test.py文件内容如下: class simple(object):def __init__(self):self.name='刚田武' 在'动态载入模块.p ...
如何html中添加动态图片,把动态图片添加到视频画面中视频添加自定义动态图片视频加动态logo...
我前面也编写过关于视频添加动态图片的教程.前面所说的给是视频添加的动态图片是软件中自带的素材,虽然软件中带的动态图片种类繁多,但是不外乎有些时候软件中并没有我们要用的动态图片,这个时候我们就需要重外部 ...
实现Android 动态载入APK（Fragment or Activity实现）
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38565345 近期由于项目太大了.导致编译通只是(Android对一个应用中的方法个数貌似有 ...
iframe禁用滚动条后根据内容动态设置宽高
iframe作为嵌入内容,如果显示滚动条,有时候可能会出现外部有滚动条,iframe内部也有滚动条,影响美观,体验性也不好.如果禁用滚动条,有可能会出现iframe中的内容显示的情况.因此,如果禁用滚 ...
页面嵌iframe标签，给iframe标签里的按钮添加点击事件
通过getElementById()方法获取iframe元素时,可以看到获取的是整个iframe标签,此时是获取不到里面的a元素的:需要再往下找iframe里的document元素. 获取a元素失败 ...
深入浅出Android动态载入jar包技术
在实际项目中.因为某些业务频繁变更而导致频繁升级client的弊病会造成较差的用户体验,而这也恰是Web App的优势,于是便衍生了一种思路.将核心的易于变更的业务封装在jar包里然后通过网络下载下来 ...
iframe异步加载_5种延迟加载图像的方法以帮助你提升网站性能与用户体验
英文 | https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/翻译 | web前端开发(ID: ...
div iframe html5,深入理解iframe
深入理解iframe 一.什么是 iframe iframe 用于在页面内显示页面,使用会创建包含另外一个文档的内联框架(即行内框架) 二.iframe 的常用属性 1.width 定义 ifram ...
iframe优缺点、X-Frame-Options（如何防止点击劫持、设置页面是否能作为iframe嵌套）、iframe长轮询和应用场景
目录 iframe优缺点优点缺点为什么尽量少用iframe iframes阻塞页面加载,影响网页加载速度唯一的连接池解决 iframe应用场景 iframe长轮询 iframe跨域使用防嵌 ...
给你的应用程序添加动态鼠标
给你的应用程序添加动态鼠标作者:魏镇江下载本文示例源代码本文程序运行效果图鼠标是一个应用程序与用户交互的主要手段,因此如果在应用程序里能显示一些比较"酷"的鼠标的话,无疑能 ...

向iframe载入html,为iFrame添加动态载入效果，提高用户体验

向iframe载入html,为iFrame添加动态载入效果，提高用户体验相关推荐

最新文章

热门文章