判断控件是否已加载完成的代码


Posted in Javascript onFebruary 24, 2010

例如:

<input id="btnPost" type="button" value="button" /> 
<img src="../jqueryui/themes/base/images/ui-icons_cd0a0a_256x240.png" alt="" id="imga" />

浏览器在解析时,首先加载 input标签,然后加载img标签。

此时如果想判断img标签是否加载完成,可以在img标签的前后加上脚本,例如
代码

<div id="loading"></div> 
<input id="btnPost" type="button" value="button" /> 
<script type="text/javascript"> 
var msg = document.getElementById("imga"); 
if (msg == null) { 
document.getElementById("loading").innerHTML = "正在生成图片控件...";//此处使用setTimeout函数不管用 
} 
</script> 
<img src="../jqueryui/themes/base/images/ui-icons_cd0a0a_256x240.png" alt="" id="imga"/> 
<script> document.getElementById("loading").innerHTML = "";</script>

注意此时的img标签前后的js代码,上面的js代码先获取img对象,然后判断该对象是否为空,如果是空的话说明没有加载完成,那么提示用户“正在生成图片控件”,加载完成后将提示信息隐藏。

上面的方法适用于所有控件或标签,但是对于本身就具有onload事件的控件或标签(该事件在对应的控件或标签加载完成后触发),我们完全可以把img后面的代码封装成一个函数供onload调用,如下
代码

<script type="text/javascript"> 
function loadedImg() { document.getElementById("loading").innerHTML = ""; } 
</script> 
</head> 
<body > 
<input id="autocomplete"/> 
<div id="loading"></div> 
<input id="btnPost" type="button" value="button" /> 
<script type="text/javascript"> 
var msg = document.getElementById("imga"); 
if (msg == null) { 
document.getElementById("loading").innerHTML = "正在图片控件...";//此处使用setTimeout函数不管用 
} 
</script> 
<img src="../jqueryui/themes/base/images/ui-icons_cd0a0a_256x240.png" alt="" id="imga" onload="loadedImg();"/> 
</body>

从上面的代码可以看出,img标签后面的代码已经封装成loadedimg方法被img的onload调用。

那哪些控件或标签具有onload事件呢?我在网上查了,如下(不知道全不全):
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
行了就是这么多了,有问题留言

Javascript 相关文章推荐
jQuery UI-Draggable 参数集合
Jan 10 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 #Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 #Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 #Javascript
jQuery 性能优化手册 推荐
Feb 23 #Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 #Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 #Javascript
js下用层来实现select的title提示属性
Feb 23 #Javascript
You might like
也谈php网站在线人数统计
2008/04/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python中int()函数的用法浅析
2017/10/17 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python模块的制作方法实例分析
2019/12/21 Python
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
介绍一下write命令
2014/08/10 面试题
实习期自我鉴定
2013/10/11 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
就业协议书
2014/09/12 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
nginx日志格式分析和修改
2022/04/28 Servers
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript