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


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是怎么继承的介绍
Jan 05 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
微信小程序获取当前位置和城市名
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函数utf8转gb2312编码
2006/12/21 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php获取linux命令结果的实例
2017/03/13 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
微信小程序实现顶部导航特效
2019/01/28 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
使用python实现rsa算法代码
2016/02/17 Python
python3 shelve模块的详解
2017/07/08 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python写一个md5解密器示例
2018/02/23 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
门卫班长岗位职责
2013/12/15 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
护士工作心得体会
2016/01/25 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
什么是SOLID
2022/03/24 Javascript