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


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 图片上传预览-兼容标准
Jun 01 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
理解javascript模块化
Mar 28 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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
我的论坛源代码(一)
2006/10/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
深入理解javascript动态插入技术
2013/11/12 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
安装dbus-python的简要教程
2015/05/05 Python
Python字典简介以及用法详解
2016/11/15 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
店面出租协议书范本
2014/11/28 职场文书
找规律教学反思
2016/02/23 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
公开致歉信
2019/06/24 职场文书