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

前言

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

onload

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

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

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

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

 window.onload = function() {
alert(" test1 ");
};
window.onload = function() {
alert(" test2 ");
};

  结果只会输出“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元素的文本。

onload事件属性,JQ中的load,ready方法的更多相关文章

  1. JQ中$(window).load和$(document).ready区别与执行顺序

    JQ中的$(document).ready()大家应该用的非常多,等同于$(function(){}),基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).l ...

  2. [转]JQ中$(window).load和$(document).ready区别与执行顺序

    一.$(window).load().window.onload=function(){}和$(document).ready()方法的区别 1.$(window).load() 和window.on ...

  3. body中的onload()函数和jQuery中的document.ready()有什么区别?

    1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...

  4. mouse事件在JQ中的应用(在动画与交互中用得比较多).

    mousedown与mouseup事件 用户交互操作中,最简单直接的操作就是点击操作,因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作,与其对应的还有一个方法mouse ...

  5. paper 3:matlab中save,load使用方法小结

    功能描述]存储文件[软件界面]MATLAB->File->Save Workspace As将变量存入硬盘中指定路径.[函数用法] save:该函数将所有workspace中变量用二进制格 ...

  6. js进阶 10-3 jquery中为什么用document.ready方法

    js进阶 10-3  jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...

  7. 【XSS】利用 onload 事件监控流量劫持

    说到跨站资源监控,首先会联想到『Content Security Policy』.既然 CSP 好用,我们何必自己再搞一套呢.那就先来吐槽下 CSP 的缺陷. 目前的 CSP 日志不详细 用过 CSP ...

  8. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

  9. $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...

随机推荐

  1. CF789D Mike and distribution

    题目连接 一道人类智慧题.... 这道题目可以转化为在a,b中的选出一些位置,使得这些位置处的值加起来大于没有选的位置的值 我们按照a的权值排序,选择第一个元素,其与元素两两分组,每组选择b更大的那一 ...

  2. Flask 第二篇

    Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 2 ...

  3. C# 从零开始写 SharpDx 应用 画三角

    原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...

  4. SharpDX初学者教程第2部分:创建窗口

    原文 http://www.johanfalk.eu/blog/sharpdx-tutorial-part-2-creating-a-window 在第二篇教程中,我们将介绍如何创建一个稍后将呈现的简 ...

  5. oracle函数 MIN([distinct|all]x)

    [功能]统计数据表选中行x列的最大值. [参数]all表示对所有的值求最大值,distinct只对不同的值求最大值,默认为all 如果有参数distinct或all,需有空格与x(列)隔开. [参数] ...

  6. ROW_NUMBER(),不允许并列名次、相同值名次不重复,结果如123456……

    将score按ID分组排名:row_number() over(partition by id order by score desc) 将score不分组排名:row_number() over(o ...

  7. Flask学习之四 数据库

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iv-database 中文翻译地址:http://ww ...

  8. 2014年最热门的国人开发开源软件TOP100

    2014年最热门的国人开发开源软件TOP100 不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多 ...

  9. day6_python序列化之 json & pickle & shelve 模块

    一.json & pickle & shelve 模块 json,用于字符串 和 python数据类型间进行转换pickle,用于python特有的类型 和 python的数据类型间进 ...

  10. Refs

    一.The ref callback attribute ref:reference,父组件引用子组件 组件并不是真实的 DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟DOM.只有当它插入文档 ...