好久没用Jquery了,最近有个东西需要写一下,就想了想那些让脚本延缓执行的一些方法有什么区别呢。
(1)当然,第一种方式就是将脚本内嵌在html中相应需要执行的地方,需要等到页面加载完成的话就放在最后。当然这已经是大家很不屑的做法,一般也就是一些测试啊什么的时候会用用或者代码就一几句话,其他很少会这么做了。作为外部文件引入的优点也就不赘述了,一般都明白。
(2)将<Script>标签从head放到〈/body〉之前,其他html内容之后。这也很好理解,主要的html加载完之后,脚本才开始运行,当然要注意,这里的加载完仅仅指的是DOM加载完,图片之类的还不一定加载完成。
(3)使用defer(推迟)属性。这个属性是表明脚本在执行时不会影响页面构造,也就是说脚本会在整个页面解析完成之后再运行,这其实和第二点是一样的,除了〈Script〉标签可以放在head里了。但是这个属性的兼容性有待考证,旧版本的浏览器只有IE是支持的,相对较新的浏览器倒是都支持了。
(4)使用async(异步)属性。这个属性是html新添加的属性,从英文解释就可以看出,该属性是为了页面之间加载不出现阻塞的情况,是并行加载相关项,所以和defer执行效果相似,但是有一个不同,可能会造成脚本的严重问题,就是运行的时机。defer是有顺序的,按照原先语句的先后顺序执行,这样对有依赖关系的脚本没有影响;但是async是下载完成就执行,要是不同脚本之间有依赖关系,就有可能会造成未知的严重错误(当然也是有可能正常使用的)。
之前说的都是关于脚本加载的先后顺序,至于执行的先后顺序,方法就更多种多样了。
(5)在onload事件之后调用,注意这是在页面所有元素加载完毕后执行的,也就是图片,flash都要先加载完,脚本才执行;还有,onload才能执行一个,不能执行多个。
a)写在body的onload事件里:
<html>
<body οnlοad="func()">
</body>
</html>
<html>
<body οnlοad="func1();func2();func3();">
</body>
</html>
b)写在脚本代码里
<script type="text/javascript">
function func(){……}
window.οnlοad=func;
</script>
<script type="text/javascript">
function func1(){……}
function func2(){……}
function func3(){……}
window.οnlοad=function(){
func1();
func2();
func3();
}
</script>
c)Jquery的写法
$(window).load(function() {
...
});
d)JS自定义函数式多次调用(我倒是从来没用过额```)
<script type="text/javascript">
function func1(){……}
function func2(){……}
function func3(){……}
function addLoadEvent(func){
var oldοnlοad=window.onload;
if(typeof window.onload!="function"){
window.οnlοad=func;
}
else{
window.οnlοad=function(){
oldonload();
func();
}
}
}
addLoadEvent(func1);
addLoadEvent(func2);
addLoadEvent(func3);
</script>
(6)Jquery使用$(document).ready(),这是在DOM加载完毕就执行,不是所有元素加载完成;相对于onload只能执行一个,ready可以有多个且都能执行:
ps:要想使用Js直接实现,还是有点小麻烦的~~
$(document).ready(function(){
...
});
//简写成如下
$(function(){
...
});
我所理解的就这样了,写个随笔记录一下,免得又忘了~