ready()方法作用:
在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验(自己理解,如有不对,欢迎评论指正。)
ready()相比onload事件绑定函数的优势:
具有较高优先级,只需等到html结构加载完成后即可执行;而onload必须等到图片在内的所有元素加载完毕后才执行。除了使用target选择器时需要结合window.onload,大多数我们都可以使用ready()来进行编写js代码。
jquery中的ready()的三种写法
1.$().ready(function(){
console.log(‘DOMContentLoaded’)
})
$(function(){
console.log(‘DOMContentLoaded’)
})
// 最简便的ready函数
$(document).ready(function(){
console.log(“DOMContentLoaded”)
})
//这种写法好像和第一种没什么区别,我想可能写document的原因可能就是应为$符号的不稳定性,
加载多个函数的问题
在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行
对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很 长时间.
而对于(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度. 执行先后顺序不同对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.而对于(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度. 执行先后顺序不同对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.而对于(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.
<script type="text/javascript">
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>
上面的代码会在页面所有内容加载完成后按先后顺序依次执行.