156-0102-3311
联系QQ 284710375
首页 > 技术分享 > JavaScript
分享到:收藏

Jquery对象、javascript的onload事件机制,具有onload事件的HTML标签2017-10-13 16:47:31

杨宇潇 原创文章,转载请标明出处

Jquery写法:

$(document).ready(function(){

    alert("hello");

});

原生javascript写法:<body onload="alert('hello');">


请注意:上面两段代码不是等价的。

<body onload="alert('hello');">这里的alert('hello');要等到页面全部加载完毕才执行,注意是全部加载,包括dom,图片等其它资源。

 

$(document).ready(function(){

    alert("hello");

});

当dom加载完就可以执行了。


onload的使用方法很多,我们最常用到的是在页面全部加载完成后执行一些函数方法,如在body标签中加入onload,或者window.inload=function(){},除此之外,onload还可以写到HTML的标签中来执行一些方法。


如果想判断页面中的img标签是否加载完成,可以在img标签的前后加上脚本,例如 

<div id="loading"></div> 

<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.png" alt="" id="imga" /> 

<script> document.getElementById("loading").innerHTML = ""; </script> 


注意此时的img标签前后的js代码,上面的js代码先获取img对象,然后判断该对象是否为空,如果是空的话说明没有加载完成,那么提示用户“正在生成图片控件”,加载完成后将提示信息隐藏。 

上面的方法适用于所有控件或标签,但是对于本身就具有onload事件的控件或标签(该事件在对应的控件或标签加载完成后触发),我们完全可以把img后面的代码封装成一个函数供onload调用,如下  

<script> 

var msg = document.getElementById("imga"); 

if (msg == null) { 

    document.getElementById("loading").innerHTML = "正在图片控件...";//此处使用setTimeout函数不管用 

}

function loadedImg() { 

    document.getElementById("loading").innerHTML = ""; 

</script> 

<div id="loading"></div> 

<img src="../jqueryui/themes/base/images/ui-icons.png" alt="" id="imga" onload="loadedImg();"/> 

 

从上面的代码可以看出,img标签后面的代码已经封装成loadedimg方法被img的onload调用。 

 

支持onload事件的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script> 


打赏

阅读排行

    大家都在搜

    博客维护不易,感谢你的肯定
    扫码打赏,建议金额1-10元
  • 15601023311