当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 判断控件是否已加载完成的代码

Javascript
javascript:以前写的xmlhttp池,代码
javascript firefox兼容ie的dom方法脚本
常用的javascript function代码
javascript Discuz代码中的msn聊天小功能
js 简单类代码
分离式javascript取当前element值的代码
javascript document.images实例
javascript 调用其他页面的js函数或变量的脚本
javascript一点特殊用法
js中cookie的使用详细分析
javascript实现通过拼音首字母快速选择下拉列表
javascript解析xml字符串的函数
用javascript和css模拟select的脚本
javascript操作select参考代码
javascript String 的扩展方法集合
javascript数组的扩展实现代码集合
宝儿的zQuery库选择器简单原型
超级经典一套鼠标控制左右滚动图片带自动翻滚
javascript关键字加亮加连接
JavaScript 应用类库代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 525 ::
收藏到网摘: n/a

判断一个控件是否已加载完成其实很简单,就是利用浏览器的解析顺序。通俗的说,代码的位置越靠前,就越先加载。 例如:
复制代码 代码如下:

<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>
行了就是这么多了,有问题留言