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


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 相关文章推荐
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
vue 自定义组件的写法与用法详解
Mar 04 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和MySQL保存和输出图片
2006/10/09 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
详解JavaScript树结构
2017/01/09 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
javascript canvas实现简易时钟例子
2020/09/05 Javascript
12步教你理解Python装饰器
2016/02/25 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
Django的models模型的具体使用
2019/07/15 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
教育见习报告范文
2014/11/03 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
活动宣传稿范文
2015/07/23 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript