$(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();
};
以上です。
随机推荐
- window.open被浏览器拦截的解决方案
现象 最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,搞得人无比郁闷啊,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截.何况当出现拦截时,很多小白根 ...
- Spring Boot 5 SpringSecurity身份验证
对于没有访问权限的用户需要转到登录表单页面.要实现访问控制的方法多种多样,可以通过Aop.拦截器实现,也可以通过框架实现(如:Apache Shiro.Spring Security). pom.xm ...
- Java 继承 执行顺序
代码: package com.company; public class Main { public static void main(String[] args) { new MyClass(); ...
- throw 语句
我们也可以写代码来抛出异常,抛出异常的语句时throw,其格式如下: throw 异常类的对象名 用throw抛出异常,一般放在方法内部.一个程序可以有多个throw.throw语句执行时,其后面的代 ...
- mysql explain输出中type的取值说明
原文: http://www.cnitblog.com/aliyiyi08/archive/2008/09/09/48878.html 这列很重要,显示了连接使用了哪种连接类别,有无使用索引. 从最好 ...
- 更改Mysql数据库中的数据出现乱码问题
数据库服务器环境:windows 7 专业版 Mysql版本:5.5.36 出现问题:搭完工程之后,在做保存和插入操作时,涉及的数据在数据库中为变为乱码. 解决方案: MySQL数据库 ...
- spring 小结
第一步:配置 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xs ...
- PostgreSQL9.2.4内核源码结构介绍
PostgreSQL的源代码可以随意获得,其开源协议也允许研究者任意修改,这里介绍一下PostgreSQL的源码结构以及部分实现机制.下载PostgreSQL源代码并减压后,其一级目录结构如下图: P ...
- win7旗舰版梦幻主题补丁~完美你的桌面
随着VISTA和WIN7的逐渐普及,你是否想拥有一个与众不同的动态桌面呢~ Windows DreamScene属于Ultimate Extras的组件之一,而Ultimate Extras是专门为W ...
- SpringMVC注解@RequestParam全面解析
在SpringMVC后台控制层获取参数的方式主要有两种,一种是request.getParameter("name"),另外一种是用注解@RequestParam直接获取.这里主要 ...