原文地址： $(document).ready vs $(window).load vs window.onload

$(document).ready

We execute our code when DOM is ready except images.

  1.  //call type 1
  2.  $(document).ready(function() {
  3.  /** work when all HTML loaded except images and DOM is ready **/
  4.  // your code
  5.  });
  6.  
  7.  //call type 2
  8.  $(function() {
  9.  /** work when all HTML loaded except images and DOM is ready **/
  10.  //your code
  11.  });
  12.  
  13.  //call type 3
  14.  $(document).on('ready', function(){
  15.  /** work when all HTML loaded except images and DOM is ready **/
  16.  //your code
  17.  });
  18.  
  19.  //call type 4
  20.  jQuery(document).ready(function(){
  21.  /** work when all HTML loaded except images and DOM is ready **/
  22.  //your code
  23.  });

$(window).load

It is work when all DOM is ready including images so it is useful when on document load we want to work with images.

  1.  $(window).load(function() {
  2.  /** this is come when complete page is fully loaded, including all frames, objects and images **/
  3.  });

window.onload

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

  1.  <element onload="myFunction"></element>

In JS

  1.  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

  1.  // In HTML
  2.  <!-- on body onload call myFunction -->
  3.  <body onload="myFunction()">
  4.  
  5.  //In JavaScript
  6.  // myFunction() which will call on body load
  7.  function myFunction(){
  8.     alert("call on body load");
  9.  }

2)  Here  alert “call on image load” call  immediately after image has been loaded

  1.  // In HTML
  2.  <!-- on image onload call myImageFunction() -->
  3.  <img src="data:image path src" onload="myImageFunction()">
  4.  
  5.  // // myFunction() which will call on image load
  6.  function myImageFunction(){
  7.     alert("call on image load");
  8.  }

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.

  1.  window.onload = function() {
  2.    init();
  3.    doSomethingElse();
  4.  };

以上です。

随机推荐

  1. [GeoServer]Openlayers简单调用

    Openlayers Demo: <html> <head> <title>OpenLayers Example</title> <script ...

  2. iOS -Swift 3.0 -UIButton属性大全

    // //  ViewController.swift //  Swift-UIButton // //  Created by luorende on 16/9/9. //  Copyright © ...

  3. java io读书笔记(5) Writing Bytes to Output Streams

    outputstream类是所有的字符输出类的父类,他是一个抽象类. 对于OutputStream类来说,其最基础的方法就是:write(). public abstract void write(i ...

  4. JS语法部分-数组

    数组的长度是动态变化的,里面可以防止任意类型的元素 var a=new Array() 数组元素的复制:a[0]=123        a[2]=456 数组的取值:a[i] 数组的属性:  a.le ...

  5. poj 算法 分类

    转载请注明出处:優YoU http://blog.csdn.net/lyy289065406/article/details/6642573 最近AC题:2528   更新时间:2011.09.22  ...

  6. 数据库SQL CRUD

    1.删除表 drop  table +表名 2.修改表 alter  table+表名+ add(添加)+列名+ int(类型) alter  table+表名+ drop(删除)+column(列) ...

  7. springday02-go2

    1.复制xml文件到container.auto下2.Waiter类实现构造函数3.Bar类中Waiter作为其成员变量,并实现其get/set方法,有参和无参构造器,toString方法4.分别修改 ...

  8. 夺命雷公狗—angularjs—19—angular-route

    ngRoute包括的内容 ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式.ng的路由(ngRoute) ...

  9. zw版【转发·台湾nvp系列例程】halcon与delphi系列例程

    zw版[转发·台湾nvp系列例程]halcon与delphi系列例程 台湾nvp技术论坛,是目前halcon与delphi例程最多的网站,也是唯一成系列的, http://zip.nvp.com.tw ...

  10. Sinatra+SQLite3+DataMapper - 十分完整的tutorial - “Superdo”

    原文地址:https://ididitmyway.herokuapp.com/past/2010/3/30/superdo_a_sinatra_and_datamapper_to_do_list/ 这 ...