$(document).ready vs $(window).load vs window.onload
原文地址： $(document).ready vs $(window).load vs window.onload
We execute our code when DOM is ready except images.
//call type 1
$(document).ready(function() {
/** work when all HTML loaded except images and DOM is ready **/
// your code
}); //call type 2
$(function() {
/** work when all HTML loaded except images and DOM is ready **/
//your code
}); //call type 3
$(document).on('ready', function(){
/** work when all HTML loaded except images and DOM is ready **/
//your code
}); //call type 4
jQuery(document).ready(function(){
/** work when all HTML loaded except images and DOM is ready **/
//your code
});
It is work when all DOM is ready including images so it is useful when on document load we want to work with images.
$(window).load(function() {
/** this is come when complete page is fully loaded, including all frames, objects and images **/
});
The onload event is a standard event in the DOM, while above two are specific to jQuery . this is also same functionality like $(window).load but window.onload is the built-in JavaScript event.The onload event occurs when an object has been loaded.like if we take a example of image and call onload event in image tag then it will call when image will load .generally we use it in body tag.
In HTML
<element onload="myFunction"></element>
In JS
object.onload=function(){/**your desire code**/};// here object can be window,body and etc
1) Here alert “call on body load” call immediately after body has been loaded
// In HTML
<!-- on body onload call myFunction -->
<body onload="myFunction()"> //In JavaScript
// myFunction() which will call on body load
function myFunction(){
alert("call on body load");
}
2) Here alert “call on image load” call immediately after image has been loaded
// In HTML
<!-- on image onload call myImageFunction() -->
<img src="data:image path src" onload="myImageFunction()"> // // myFunction() which will call on image load
function myImageFunction(){
alert("call on image load");
}
window.onload Examples
The function fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
window.onload = function() {
init();
doSomethingElse();
};
以上です。
随机推荐
- 深入SQL截取字符串(substring与patindex)的详解
首先学习两个函数1.substring 返回字符.binary.text 或 image 表达式的一部分.基本语法:SUBSTRING ( expression , start , length ) ...
- Python模块(pickle)
pickle 序列化和反序列化 序列化作用 序列化使用 cPickle使用例 Python提供一个标准的模块,称为pickle.使用它你可以在一个文件中储存任何Python对象,之后你又可以把它完整无 ...
- osgEarth编译的一些问题
这两天借着osg培训的机会捯饬了下64位osgearth的编译.遇到了一些问题: 首先我没有编译osg,用的提供的osg3.2.1编译好的64位包. 编译osgearth先后编译了2个版本,先是2.7 ...
- MongoDB Map Reduce
介绍 Map-Reduce是一种计算模型,简单的说就是将大批量的工作分解(MAP)执行,然后再将结果合并成最终结果(REDUCE). MongoDB提供的Map-Reduce非常灵活,对于大规模数据分 ...
- 高级选择器querySelector和querySelectorAll
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...
- Wcf Restful Service服务搭建
目的 使用Wcf(C#)搭建一个Restful Service 背景 最近接到一个项目,客户要求使用Restful 方式接收到数据,并对数据提供对数据的统计显示功能,简单是简单,但必须要使用Restf ...
- Swift动画编程指南-02 Swift动画是怎么炼成的
上一节我们看了几个很棒的例子,我们不禁会想.他们是怎么设计的,怎么从一个空白的画布变成一个完整的,美丽的动画.这些动画是如何产生的,是哪些属性被改变了.我们还要认真思考的是,每一个步骤到底发生了什么. ...
- Facebook Hacker Cup 2014 Qualification Round
2014 Qualification Round Solutions 2013年11月25日下午 1:34 ...最简单的一题又有bug...自以为是真是很厉害! 1. Square Detector ...
- C# 动态链接库的创建
首先在C#工程下面安装第三方插件包 安装方法:Tools --> Library Package Manager --> Package Manager Console Install-P ...
- [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...