JS中onload方法，JQ中的load,ready方法

Posted 2021-02-16 yangchin9

JS中的 onload 

属性：网页中所有的内容加载完毕后(包括图片)才能执行；

　　　页面中只能有一个onload

window.onload = function() {
   …… 
};

 

JQ的 ready()

属性：网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完（例如图片）；

　　　页面中可以写用多个

$(document).ready(function() {
    ……
});

简写：$(function(){……})

JQ的 load()

属性：这个方法会等到页面所有内容加载完毕后才会触发，并且同时没有onload事件属性的缺点。

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

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

$(window).load(function() {
     ……
}); 
// 此处用法和作用于window.onload = function(){……} 方法相同

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

JQuery事件load()方法:

　　页面中只能有一个

$("img").load(function() {
     console.log("图像已加载")  //在图片加载完成后打印提示内容
});

JQuery Ajax load()方法:

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

$("button").click(function() {
   $("div").load("demo_ajax_load.txt");   //通过AJAX请求来改变div元素的文本
});

 

相关：

function clickReload() {
    window.location.reload()    
} //调用次函数 浏览器将重新加载（刷新）当前页面