博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS 页面加载触发事件 document.ready和window.onload的区别
阅读量:6580 次
发布时间:2019-06-24

本文共 1049 字,大约阅读时间需要 3 分钟。

document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件:

一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);

二是onload,指示页面包含图片等文件在内的所有元素都加载完成。

1、Dom Ready

使用jq时一般都是这么开始写脚本的:

$(function(){       // do something });复制代码

例如:

$(function() {     $("a").click(function() {           alert("Hello world!");      });})复制代码

这个例子就是给所有的a标签绑定了一个click事件。即当所有链接被鼠标单击的时候,都执行 alert("Hello World!"); 也就是说页面加载时绑定,真正该触发时触发。 其实这个就是jq ready()的简写,它等价于:

$(document).ready(function(){     //do something})//或者下面这个方法,jQuer的默认参数是:“document”;$().ready(function(){    //do something})复制代码

这个就是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.getElementById("imgID").onload=function(){     //do something}复制代码

这种就是Dom Load,他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。 那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

最后附上一段在所有DOM元素加载之前执行的jQuery代码。

复制代码

转载地址:http://tabno.baihongyu.com/

你可能感兴趣的文章
root用户重置其他密码
查看>>
Oracle推断值为非数字
查看>>
多年前写的一个ASP.NET网站管理系统,到现在有些公司在用
查看>>
vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath
查看>>
从JDK源码角度看Short
查看>>
五年 Web 开发者 star 的 github 整理说明
查看>>
Docker 部署 SpringBoot 项目整合 Redis 镜像做访问计数Demo
查看>>
中台之上(五):业务架构和中台的难点,都是需要反复锤炼出标准模型
查看>>
使用模板将Web服务的结果转换为标记语言
查看>>
inno setup 打包脚本学习
查看>>
php 并发控制中的独占锁
查看>>
[Leetcode] Factor Combinations 因数组合
查看>>
APM终端用户体验监控分析(下)
查看>>
React Native 0.20官方入门教程
查看>>
JSON for Modern C++ 3.6.0 发布
查看>>
Tomcat9.0部署iot.war(环境mysql8.0,centos7.2)
查看>>
我的友情链接
查看>>
监听在微信中打开页面时的自带返回按钮事件
查看>>
第一个php页面
查看>>
世界各国EMC认证大全
查看>>