zoukankan      html  css  js  c++  java
  • window.onload与$(document).ready()区别

    window.onload事件会在页面加载完成后触发。实例:

    <!doctype html>
    <html>
    <head>
    <title>window.onload示例</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    window.onload = function(){
    alert('页面加载完成,第三显示');
    }
    alert('页面尚未加载完成,页面内容不显示+第一显示');
    $(document).ready(function () {
    alert('ready第二显示');
    });
    </script>
    </head>
    <body> 页面内容 </body>
    </html>

      

    打开该页面会首先弹出“页面尚未加载完成,页面内容不显示+第一显示”提示框,此时页面时空白的(由于alert会阻塞页面的线程,所以页面不会继续加载,直到点击确定后才会继续执行),

    点击确定后,弹出“ready第二显示”提示框,$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕,

    再次点击确定后,会弹出提示“页面加载完成,第三显示”,此时可以看到页面内容四个字,页面已加载完成。

    $一般是代表jQuery对象。

    onload是html原生事件,用jQuery的时候则一般使用$(document).ready(),两者的区别有:
    1.执行时间
    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

    2.编写个数不同
    window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
    $(document).ready()可以同时编写多个,并且都可以得到执行

    3.简化写法
    window.onload没有简化写法
    $(document).ready(function(){})可以简写成$(function(){});

  • 相关阅读:
    HDU 4370 0 or 1 (最短路)
    POJ 2449 Remmarguts' Date (K短路 A*算法)
    HDU 5984 Pocky ( 2016 CCPC 青岛 C)
    [leetcode-733-Flood Fill]
    [leetcode-746-Min Cost Climbing Stairs]
    OpenCV学习5-----使用Mat合并多张图像
    人体姿态的相似性评价基于OpenCV实现最近邻分类KNN K-Nearest Neighbors
    OpenCV学习4-----K-Nearest Neighbors(KNN)demo
    [leetcode-728-Self Dividing Numbers]
    [leetcode-724-Find Pivot Index]
  • 原文地址:https://www.cnblogs.com/yuwen1995/p/9167699.html
Copyright © 2011-2022 走看看