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


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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
奇妙的js
2007/09/24 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
日期 时间js控件
2009/05/07 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
ext jquery 简单比较
2010/04/07 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
分析JS单线程异步io回调的特性
2017/12/01 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
python中的代码编码格式转换问题
2015/06/10 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python实现图片素描效果
2020/09/26 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
几个数据库方面的面试题
2016/07/01 面试题
团委书记的竞聘演讲稿
2014/04/24 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
专家推荐信范文
2015/03/26 职场文书
社会实践单位意见
2015/06/05 职场文书
女性健康讲座主持词
2015/07/04 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android