zoukankan      html  css  js  c++  java
  • $(document).ready()和onload() html渲染时的区别

    不谈调用次数,加载先后问题,只看渲染时区别

    1、都在数据绑定完加载。

    2、ready可以有多个,且都执行,onload虽可以写多个,但是只执行最后一个。

    3、 $.ready = function () {} 和  $(document).ready()不同, $.ready类似于onload,多个的话只会执行最后一个,并且和$(document).ready()同是写的话会覆盖$(document).ready();但是和$(document).ready()类似的是,等dom元素绘制完就执行,不必等所有元素(图片)加载完。

    <!DOCTYPE html>
    <html>
    <head>
        <title>ready 和 onload()的区别</title>
    </head>
    <body>
        <p>论一个人的心胸</p>
        <img src="http://pic1.win4000.com/wallpaper/e/526c9f87129d9.jpg" />
        <img src="http://fj2.eastday.com/hdqxb2013/20130823_7/node757990/images/02347082.jpg" />
        <img src="http://pic25.nipic.com/20121210/7447430_215152474000_2.jpg" />
        <img src="http://www.ftourusa.com/uploads/allimg/120709/10-120F91156331I.jpg" />
        <img src="http://pic1.win4000.com/wallpaper/a/5822ec48466e9.jpg" />
        <img src="http://pic1.win4000.com/wallpaper/a/5822ec4e20a0d.jpg" />
        <img src="http://www.sinaimg.cn/dy/slidenews/4_img/2010_12/703_34324_811130.jpg" />
        <img src="http://www.cecet.cn/upimg/allimg/100727/1124SUQ4.jpg" />
        <img src="http://img1.cache.netease.com/catchpic/9/95/959D16A04C3C267B26A0032091AA7F70.jpg" />
        <img src="http://www.meijialx.com/images/122547_media_20071310386.jpg" />
        <img src="http://img15.3lian.com/2015/h1/21/d/28.jpg" />
        <img src="http://img1.3lian.com/2015/a1/147/d/7.jpg" />
        <img src="http://img.tuku.cn/file_thumb/201601/m2016012815305053.jpg" />
        <img src="http://pic25.nipic.com/20121210/7447430_215152474000_2.jpg" />
        <img src="http://www.ftourusa.com/uploads/allimg/120709/10-120F91156331I.jpg" />
        <img src="http://pic1.win4000.com/wallpaper/a/5822ec48466e9.jpg" />
        <img src="http://pic1.win4000.com/wallpaper/a/5822ec4e20a0d.jpg" />
        <img src="http://www.sinaimg.cn/dy/slidenews/4_img/2010_12/703_34324_811130.jpg" />
        <img src="http://www.cecet.cn/upimg/allimg/100727/1124SUQ4.jpg" />
        <img src="http://img1.cache.netease.com/catchpic/9/95/959D16A04C3C267B26A0032091AA7F70.jpg" />
        <img src="http://www.meijialx.com/images/122547_media_20071310386.jpg" />
        <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
       
      
        <script type="text/javascript">
            window.onload = function () {
                alert("我说onload函数");
            }
            $(document).ready(function () {
                alert("第一次document.ready");
            })
            $(document).ready(function () {
                alert("第二次document.ready");
            })
            $.ready = function () {
                alert("第三次加载ready函数");
    
            }
            $.ready = function () {
                alert("第四次加载ready函数");
    
            }
            window.onload = function () {
                alert("我是第二次加载onload函数");
            }
        </script>
    </body>
    </html>
    简单示例

    自己使用时碰到的区别就这些,其他的大差不差,可以自己再搜下确认。

    加载先后顺序:

    document.ready方法在DOM树加载完成后就会执行,而window.onload是在页面资源(比如图片和媒体资源,它们的加载速度远慢于DOM的加载速度)加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。

    参考:https://baijiahao.baidu.com/s?id=1613225567743061589&wfr=spider&for=pc

  • 相关阅读:
    CentOS6.7 mysql5.6.33修改数据文件位置
    win8 win10 安装msi 提示2502、2503的错误代码
    2016年国内开源镜像站点汇总
    eclipse创建本地maven
    maven添加sqlserver的jdbc驱动包
    CentOS6.5下RPM方式安装mysql5.6.33
    linux中~和/的区别
    Linux命令学习(22):ss命令
    Linux命令学习(21):netstat命令
    Linux命令学习(20):traceroute命令
  • 原文地址:https://www.cnblogs.com/meng9527/p/9802617.html
Copyright © 2011-2022 走看看