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


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 相关文章推荐
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
解读vue生成的文件目录结构及说明
Nov 27 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
用Python实现协同过滤的教程
2015/04/08 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python实现微信远程控制电脑
2018/02/22 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
车间操作工岗位职责
2013/12/19 职场文书
2015年材料员工作总结
2015/04/30 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
创业计划书详解
2019/07/19 职场文书