$(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();
};
以上です。
随机推荐
- 如何查看自己的linux是32位还是64位
查看linux是多少位的几位方法:查看linux机器是32位还是64位的方法:方法一:file /sbin/init 或者 file /bin/ls结果如下:/sbin/init: ELF 64-bi ...
- Power Bi的优势 特色功能
Power-BI可以让决策者不再依赖他人,就可及时.准确(没有人为加工,自然是最准确的)的得到各种关键经营数据: Power-BI不仅仅是让报表自动生成,而是完全改变了获取经营数据的方式,它可以直观的 ...
- Android图片压缩方法总结
本文总结Android应用开发中三种常见的图片压缩方法,分别是:质量压缩法.比例压缩法(根据路径获取图片并压缩)和比例压缩法(根据Bitmap图片压缩). 第一:质量压缩方法: ? 1 2 3 ...
- 第十三篇 Integration Services：SSIS变量
本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...
- 第六篇 Replication：合并复制-发布
本篇文章是SQL Server Replication系列的第六篇,详细内容请参考原文. 合并复制,类似于事务复制,包括一个发布服务器,一个分发服务器和一个或多个订阅服务器.每一个发布服务器上可以定义 ...
- 三层交换机+二层交换机配置VLAN+DHCP
使用思科模拟软件Cisco Packet Tracer Student,软件功能有限,只能架设简单的网络架构,适合初学者使用.
- python之map、filter、reduce、lambda函数
map map函数根据提供的函数对指定的序列做映射,定义:map(function, sequence[,sequence,...])--->list 例1 >>> map(l ...
- HTML语言的一些元素（一）
1)标题的六个等级:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>.如果写了诸如:<h7>等,则作为正文 ...
- tableview隐藏多余分割线
- (void)setExtraCellLineHidden: (UITableView *)tableView{ UIView *view =[ [UIView alloc]init]; view. ...
- poj: 3006
简单题 #include <iostream> #include <stdio.h> #include <string> #include <stack> ...