iframe loading 效果

最新推荐文章于 2024-01-08 15:36:05 发布
最新推荐文章于 2024-01-08 15:36:05 发布
阅读量700 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yansen/archive/2012/03/09/2387845.html
版权

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description"  content="" />
<title>iframe  loading 效果</title>
<link rel="stylesheet"  href=" " type="text/css"/>
<script type="text/javascript" src=""></script>
</head>
<body>
<iframe src="http://www.cnblogs.com/yansen/" frameborder="0" marginheight="0" marginwidth="0"
        scrolling="auto" width="100%" id="alarmframe" onreadystatechange="stateChangeIE(this)"
        style="display: none" οnlοad="stateChangeFirefox(this)" ></iframe>
    <div id="LoadDiv" align="center">
        <img src="ajax-loader.gif" />
    </div>
    <script type="text/javascript">
        function stateChangeIE(_frame) {
            if (_frame.readyState == "complete")//state: loading, interactive, complete
            {
                var loader = document.getElementById("LoadDiv");
                //loader.innerHTML = "加载中";
                loader.style.display = "none";
                _frame.style.visibility = "visible";
                _frame.style.display = "block"
            }
        }
        function stateChangeFirefox(_frame) {
            var loader = document.getElementById("LoadDiv");
            //loader.innerHTML = "加载中";
            loader.style.display = "none";
            _frame.style.visibility = "visible";
            _frame.style.display = "block"
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/yansen/archive/2012/03/09/2387845.html

aichiliao5513
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe调用加loading特效
01-15
iframe调用加loading特效特别合适远程调用速度慢而等待问题，简单方便
div+css代替iframe框架并带全屏遮罩加载特效
01-24
div+css代替iframe框架并带全屏遮罩加载特效，div+css框架、div代替iframe、框架全屏遮罩、全屏加载特效
iframe加载loading...
管子（zero）的杂乱空间
12-06 1663
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
iframe添加loading效果
lfq1996的博客
03-14 2253
iframe添加loading效果
给iframe添加loading状态
xcodebin的博客
08-06 5595
if(iframe.attachEvent){ //IE iframe.attachEvent("onreadystatechange", function() { //此事件在内容没有被载入时候也会被触发，所以我们要判断状态 //有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断 if (iframe.readyState...
很酷的javascript loading效果代码
10-30
通过以上知识点，我们了解到，这段代码不仅可以作为学习loading效果制作的示例，还可以作为学习JavaScript基础、DOM操作以及浏览器兼容性处理的实用案例。它涉及到了一些较为老旧的Web技术，虽然在现代网页设计中不...
layui easyweb iframe v3.1.8源码
12-08
[增加] 增加fixed方式的select，可用在表格、滚动弹窗中 [增加] 增加动态模板功能 [增加] 主页工作台、控制台的内容进行了补充完善 ...[优化] iframe版不需要在每个页面写loading了，由框架自动增加 [优
jquery插件:ajax和iframe加载提示效果1.1版
05-05
2，当iframe隐藏时的错误显示效果 3，当iframe以tab标签的方式显示时，由于tab标签切换执行也需要一段时间，造成的获取的iframe的高和宽不是最终的高和宽 4，其他细微调整。 草草增加了一个例子。和新版本打包在一起...
框架加载时的loading效果，兼容Firefox.rar
07-04
它可能包含了HTML结构、CSS样式和JS脚本，演示了如何在框架元素（如`<iframe>`）加载时触发并显示loading效果。 为了实现加载效果，JS代码可能涉及到以下几个关键步骤： 1. 监听框架的“load”事件，当框架内容开始...
页面动感loading特效代码
10-11
页面动感loading特效代码 使用推荐下载
iframe 加载过程中显示Loading 加载完全后显示
08-20 1066
             "load" align="center">"http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" /> loading...                                                                "demo"      src="ht
Vue中 iframe 的内容加载慢，实现加载（Loading）效果
明天也要努力的博客
08-30 5874
需求： 由于 iframe 的内容加载较慢，需要在加载完成前添加 loading 效果。 本文 loading 使用的是 Element 框架的加载（Loading）组件。 功能实现完整代码 <template> <div style="height:1000px;" v-loading="loading"> <iframe ref="Iframe" src="https://www.taobao.com/" width="
css body内有iframe动态给iframe src赋值 iframe内容加载之前loding动画
weixin_45062076的博客
09-07 882
//gif自己找 样式自己调 两个div 一个给img 一个给文字 为了横向对齐图片和文字 <div id="waitPage" style="margin-top: 25%; margin-left: 40%;display:none"> <div style="display:inline-block;float:left"> <img style="height: 30px; width: 30px;" src="
iframe加载时的loading效果，兼容Firefox
sgear
09-01 9691
iframe加载时的loading效果，兼容Firefox   新建网页 1   http://sysimages.tq.cn/images/analysis_images/ajax-loader.gif" /> loading...       function stateChangeIE(_frame)    {      if (_frame.readyStat
javscript 实现iframe加载内容页出现LOADING效果
昔年的博客
06-30 1923
javscript 实现iframe加载内容页出现LOADING效果 iframe加载内容页实现LOADING效果，即iframe加载的内容完全下载完后现显示出来。LOADING消失 <div id="load" align="center"> <img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif"...
如何使用iframe加载loading效果让你的网站更加专业
Shids_的博客
03-08 8422
如何使用iframe加载loading效果让你的网站更加专业
iframe判断加载是否完成添加loading或者取消loading效果
最新发布
weixin_45776308的博客
01-08 833
2.2 将src置空后会立马又调一次这个加载方法，但是此时iframe的内容为空白，所以判断src是否为空值再进行操作，比如我这个里面是加载完成后将loading效果去除。2.1在来回切换iframe得src时，有的iframe已经加载完成却没进入到加载完成得方法中，解决方法：把src置空后调用此方法，然后把src的赋值写在方法的最后面。1.判断iframe是否加载完成的方法。
iframe 标签(用于嵌套网页)及loading加载动画效果
热门推荐
m0_58293192的博客
12-16 1万+
iframe 标签(用于嵌套网页)及loading加载动画效果
vue iframe loading
09-14
在Vue中加载iframe可以使用`<iframe>`标签，并且可以通过`v-if`指令来控制其显示与隐藏。以下是一个简单的示例： ```vue <template> <div> <button @click="loadIframe">加载iframe</button> <iframe v-if="showIframe" :src="iframeUrl" width="100%" height="400px"></iframe> </div> </template> <script> export default { data() { return { showIframe: false, iframeUrl: 'https://www.example.com' }; }, methods: { loadIframe() { this.showIframe = true; } } }; </script> ``` 在上面的例子中，点击"加载iframe"按钮会设置`showIframe`为`true`，从而显示iframe。你可以将`iframeUrl`更改为你需要加载的网页链接。 当然，这只是一个基本的示例，你可以根据自己的需求进行更多的定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值