首页 > 文章 > JS中onload方法,JQ中的load,ready方法

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

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()    
} //调用次函数 浏览器将重新加载(刷新)当前页面

 

标签:AD结构
时间:2019-04-16 00:52:24阅读(19)评论(0) 收藏(0) 【+收藏】
评论
暂无评论!
登录后评论!
加入时间:2018-03-07
关注此人发短消息
文章分类
默认分类(24333
月中天 关注的人(0
月中天 被(1)人关注
联系我们 - 留言反馈
© 2017 版权所有 鲁ICP备17052893号