首页 > 代码库 > ready与load的区别
ready与load的区别
JQuery里有ready和load事件
$(document).ready(function() { // ...代码...})//document ready 简写$(function() { // ...代码...})$(document).load(function() { // ...代码...})他们的主要区别为ready先执行，load后执行。
DOM文档加载的步骤：
(1) 解析HTML结构。(2) 加载外部脚本和样式表文件。(3) 解析并执行脚本代码。(4) 构造HTML DOM模型。//ready(5) 加载图片等外部文件。(6) 页面加载完毕。//load
从上面的描述中大家应该已经理解了吧，ready在第（4）步完成之后就执行了，但是load要在第（6）步完成之后才执行。
结论：
ready与load的区别就在于资源文件的加载，ready构建了基本的DOM结构，所以对于代码来说应该越快加载越好。在一个高速浏览的时代，没人愿意等待答案。假如一个网站页面加载超过4秒，不好意思，你1/4的用户将面临着流失，所以对于框架来说用户体验是至关重要的，我们应该越早处理DOM越好，我们不需要等到图片资源都加载后才去处理框架的加载，图片资源过多load事件就会迟迟不会触发。
一个实例：
document.addEventListener("DOMContentLoaded", function() { console.log(‘DOMContentLoaded回调‘)}, false);window.addEventListener("load", function() { console.log(‘load事件回调‘)}, false);console.log(‘普通方法一‘)//测试加载$(function(){ console.log(‘jquery ready‘)})console.log(‘普通方法二‘)执行的顺序为：
普通方法一普通方法二jquery readyDOMContentLoaded回调load事件回调
ready与load的区别
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。