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


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 星级评分效果(手写)
Dec 24 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 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怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PDO::_construct讲解
2019/01/27 PHP
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
详解Nodejs mongoose
2018/06/10 NodeJs
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
详解Python中的测试工具
2019/06/09 Python
python实现宿舍管理系统
2019/11/22 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
学习十八大宣传标语
2014/10/09 职场文书
借条格式范本
2015/05/25 职场文书
文艺演出主持词
2015/07/01 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js