$.ready和onload 区别

时间：2023-03-09 17:42:41
$.ready和onload 区别

1、jq ready()的方法就是Dom Ready

他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。 
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

2、Dom Load

用原生的js的时候我们通常用onload时间来做一些事情，比如： 
window.onload=function(){ 
//do something 
} 
//或者经常用到的图片，假设这个 
document.getElementByIdx_x("imgID").onload=function(){ 
//do something 
} 
这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

3.用个最常用的例子说明Dom Ready和Dom Load两者的区别 
Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； 
Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等； 
比如一个图片浏览的效果，通常如果图片尺寸很大的情况下，为了防止图片把页面撑开通常会限定图片的宽度或高度，如果是单张图片或者是多张规格比例统一的图片下我们可以直接在<img>上价格宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>，比如（推荐）或者可以在css样式中加宽度或者高度的属性。但是如果这些张规格比例不统一的图片要浏览呢？那就有问题，你设置宽高很可能造成图片严重失真。在ie6之后ie7，ie8还有其他主流浏览器支持css2.1中min-width，max-width，min-height，max-width，这样我们就可以用min-width，max-width，min-height，max-width解决这些问题，但是ie6除非是抛弃性能问题用css表达式

随机推荐

  1. Linux 系统的网络配置文件

    系统的网络配置文件 方式一: 界面操作 setup -->界面配置网络,网关等 方式二: 修改配置文件 # 修改配置 vim /etc/sysconfig/network-scripts/ifc ...

  2. Skype for Business Server-呼叫质量仪表板（一）安装与配置

    第一篇:安装与配置 很多公司在运行过程中都遇到了难以追踪客服人员绩效的情况,公司没有有效的方法追踪员工在通过电话等远程方式解决客户问题.销售产品.客户关怀的情况.Skype for Business提 ...

  3. Mac环境下WingIDE切换python版本

    https://www.cnblogs.com/fastLearn/p/6514442.html

  4. c++程序员学习go

    作为一个c++程序员学习go编程的笔记.首先声明本人文笔太差,当你阅读一点觉得实在无法阅读下去时请移步. 下载安装go,安装完毕后会增加系统环境变量path内容指定go程序所在目录,可以打开cmd输入 ...

  5. Service Mesh服务网格之Linkerd架构

    今天详细介绍一下Linkerd的架构. 控制平面 Linkerd控制平面是一组在专用Kubernetes命名空间中运行的服务(在Linked默认情况下).这些服务完成各种事情——聚合遥测数据.提供面向 ...

  6. Git学习文档——文件状态git status

    1.已经跟踪的文件有三种状态 已跟踪的文件,即被纳入版本控制的文件,又分为未修改(unmodified).已修改(modified).已暂存(staged)三种状态. 如图: 当在工作目录中新加入一个 ...

  7. springboot 配置jpa启动报Error processing condition on org.springframework.boot.autoconfigure.data.web.SpringDataWebAutoConfiguration.pageableCustomizer

    springboot +gradle 配置jpa启动报Error processing condition on org.springframework.boot.autoconfigure.data ...

  8. Docker存储方式选型建议

    转自:https://segmentfault.com/a/1190000007168476 第一部分 问题诊断 事情从一次实施项目说起,我们需要帮助客户将他们的应用容器化并在数人云平台上发布此应用. ...

  9. css中位置计算

    一.position属性 1. position的属性: ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由后面的元素填充.定位的起始位置为最近的已定位(设定了position)父元素 ...

  10. js对LocalDateTime时间的格式化成yyyy-MM-dd HH:mm:ss

    formatter: function(value,row,index){ var arr = value; if(arr==null || arr==""){ return &q ...

相关文章