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


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 Object.extend
May 18 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
搭建vue开发环境
2018/07/19 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python实现验证码识别功能
2018/06/07 Python
原生python实现knn分类算法
2019/10/24 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
财务管理专业推荐信
2013/11/19 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
理发店策划方案
2014/06/05 职场文书
绿色环保口号
2014/06/12 职场文书
党员民主评议个人总结
2014/10/20 职场文书
旷工检讨书1000字
2015/01/01 职场文书
2015年财政局工作总结
2015/05/21 职场文书
热爱劳动主题班会
2015/08/14 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript