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


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面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
有关Promises异步问题详解
Nov 13 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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的FTP学习(二)
2006/10/09 PHP
php统计文章排行示例
2014/03/04 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python实现自动登录百度空间的方法
2017/06/10 Python
用Python解决x的n次方问题
2019/02/08 Python
python word转pdf代码实例
2019/08/16 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
实习自我鉴定范文
2013/10/30 职场文书
小学少先队活动方案
2014/02/18 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
学校食堂管理制度
2015/08/04 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android