onload事件属性,JQ中的load,ready方法
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方法的更多相关文章
- JQ中$(window).load和$(document).ready区别与执行顺序
JQ中的$(document).ready()大家应该用的非常多,等同于$(function(){}),基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).l ...
- [转]JQ中$(window).load和$(document).ready区别与执行顺序
一.$(window).load().window.onload=function(){}和$(document).ready()方法的区别 1.$(window).load() 和window.on ...
- body中的onload()函数和jQuery中的document.ready()有什么区别?
1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...
- mouse事件在JQ中的应用(在动画与交互中用得比较多).
mousedown与mouseup事件 用户交互操作中,最简单直接的操作就是点击操作,因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作,与其对应的还有一个方法mouse ...
- paper 3:matlab中save,load使用方法小结
功能描述]存储文件[软件界面]MATLAB->File->Save Workspace As将变量存入硬盘中指定路径.[函数用法] save:该函数将所有workspace中变量用二进制格 ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- 【XSS】利用 onload 事件监控流量劫持
说到跨站资源监控,首先会联想到『Content Security Policy』.既然 CSP 好用,我们何必自己再搞一套呢.那就先来吐槽下 CSP 的缺陷. 目前的 CSP 日志不详细 用过 CSP ...
- jq方法中 $(window).load() 与 $(document).ready() 的区别
通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...
- $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...
随机推荐
- CF789D Mike and distribution
题目连接 一道人类智慧题.... 这道题目可以转化为在a,b中的选出一些位置,使得这些位置处的值加起来大于没有选的位置的值 我们按照a的权值排序,选择第一个元素,其与元素两两分组,每组选择b更大的那一 ...
- Flask 第二篇
Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 2 ...
- C# 从零开始写 SharpDx 应用 画三角
原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...
- SharpDX初学者教程第2部分:创建窗口
原文 http://www.johanfalk.eu/blog/sharpdx-tutorial-part-2-creating-a-window 在第二篇教程中,我们将介绍如何创建一个稍后将呈现的简 ...
- oracle函数 MIN([distinct|all]x)
[功能]统计数据表选中行x列的最大值. [参数]all表示对所有的值求最大值,distinct只对不同的值求最大值,默认为all 如果有参数distinct或all,需有空格与x(列)隔开. [参数] ...
- ROW_NUMBER(),不允许并列名次、相同值名次不重复,结果如123456……
将score按ID分组排名:row_number() over(partition by id order by score desc) 将score不分组排名:row_number() over(o ...
- Flask学习之四 数据库
英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iv-database 中文翻译地址:http://ww ...
- 2014年最热门的国人开发开源软件TOP100
2014年最热门的国人开发开源软件TOP100 不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多 ...
- day6_python序列化之 json & pickle & shelve 模块
一.json & pickle & shelve 模块 json,用于字符串 和 python数据类型间进行转换pickle,用于python特有的类型 和 python的数据类型间进 ...
- Refs
一.The ref callback attribute ref:reference,父组件引用子组件 组件并不是真实的 DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟DOM.只有当它插入文档 ...