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


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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
jQuery 选择器详解
Jan 19 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
详解package.json版本号规则
2019/08/01 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python中pygame模块用法实例
2014/10/09 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python实现BackPropagation算法
2017/12/14 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python的pygame安装教程详解
2020/02/10 Python
python中pickle模块浅析
2020/12/29 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
学校通报表扬范文
2015/05/04 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
Python实现批量自动整理文件
2022/03/16 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL