您的位置: 首页  >  IT文章  >  onload事件属性，JQ中的load,ready方法 onload事件属性，JQ中的load,ready方法

onload事件属性，JQ中的load,ready方法 onload事件属性，JQ中的load,ready方法

分类: IT文章 • 2024-01-09 13:04:18

前言

　　页面中的很多操作，需要我们在所需资源下载完成后，才可以进行操作，而资源没有及时下载，我们进行操作的话，是会报错。因此我们需要熟练掌握哪些事件可以帮助我们在资源准备就绪后，再开始进行相关的操作。接下来我们就原生JS的事件属性onload,JQ中的load，ready方法进行一些讨论。

onload

　　HTML onload事件属性，常用在<body>中，一旦完全加载所有内容(包括图像，脚本文件，CSS文件等)，就执行一段脚本。

　　以下内容是参考了《锋利的Jquery》一书，感兴趣的朋友也可以去原书了解.

　　window.onload的执行时机：必须等待网友中所有的内容加载完毕后(包括图片)才能执行。

　　编写个数： 不能同时编写多个

1 window.onload = function() {
2      alert(" test1 "); 
3 };
4 window.onload = function() {
5      alert(" test2 "); 
6 };

　　结果只会输出“test2”。

　　特别注意: 像onload事件之类的使用匿名函数，即window.onload = function() { fnc(); //这里执行函数};这种形式的才是在页面加载完成后执行。

　　另外使用DOM0级的方式是可以编写多个的。例如:

<body onload="a();b()">
    // 代码
</body>

　　不推荐这么写吧。

　　onload事件属性存在用户体验的问题，如果当需要下载的资源很大时，需要用户等待很长的时间。

JQ的ready()方法

　　通过这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，可以极大地提高web应用程序的响应速度。

　　$(document).ready()执行的时机：网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完.

　　编写个数：能同时编写多个，比如:

　　

$(document).ready(function() {
      alert("Hello world");
});
$(document).ready(function() {
      alert("Hello world");
});

　　结果两次都输出。同一个页面可以无限次使用$(document).ready()事件，其中注册的函数会按照（代码中的）先后顺序依次执行

　　简写方式：

$(function() {
     //代码
});

　　更详细的介绍，可以看《锋利的Jquery》一书，第四章4.1.1

JQ中的load()方法

　　但是比如我们需要对图片进行剪切，缩放操作时，需要网页所有的内容加载完毕后才执行的话，可以使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时没有onload事件属性的缺点。

$(window).load(function() {
     alert("test1");
});
$(window).load(function() {
     alert("test2");
});

　　代码会在页面所有内容加载完成后按照先后顺序执行。

　　《锋利的Jquery》中4.1.1中的描述如下:

　　另外需要注意一点，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很可能图片还未加载完毕，所有例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用jQuery中另一个页面加载的方法--load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容(包括窗口，框架，对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

　　补充说明下，JQ中有两个load()方法，一个是JQuery事件load()方法，一个是JQuery Ajax load()方法.

　　具体调用哪个函数，根据参数而定。

　　JQuery事件load()方法:

$("img").load(function() {
     $("div").text("图像已加载");
});

　　在图像加载完成后，输出“图像已加载”;

　　JQuery Ajax load()方法:

　　load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

$("button").click(function() {
   $("div").load("demo_ajax_load.txt");
});

　　通过AJAX请求来改变div元素的文本。

相关推荐