本文共 1568 字，大约阅读时间需要 5 分钟。

JS方法加载有两种事件：

1. ready。表示文档结构已经加载完成（不包含图片等非文字媒体文件）；

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

一般情况一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。那么document.ready事件在“加载js和css”和“加载图片等其他信息”之间。比如有时我们发现我们的js方法是是没生效的，这就是由于DOM的加载顺序而导致的。比如下代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>                                  
   
    			  {
  { message }}			
   
  

使用Vue在页面输出Hello Vue！是没效果的，页面只输出{

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>                              
   
    			  {
  { message }}			
   
    

此时页面才会正常的打印出Hello Vue！的内容，但现在问题来了，如果我就要放置在head标签中呢？这就涉及到我们开始提到的加载顺序。

1.原生js的onload加载方式

                                  
   
    			  {
  { message }}			
   
  

      在元素的 onload 事件中绑定一个处理函数。假设处理函数绑定给 window 对象。则会在全部内容 ( 包含窗体、框架、对象和图像等 ) 载入完成后触发。假设处理函数绑定在元素上，则会在元素的内容载入完成后触发。

2.利用jquery实现的ready加载（需引入jquery.js）

$(document).ready(function(){});//上面的代码也可以简写为如下内容$(function(){       });

3.DOM元素加载之前执行

(function(){    			   alert("DOM加载之前执行！");	        })(jQuery);

 上面的代码alert会在DOM加载之前执行

4.总结

window.onload必须等到页面内包含图片的全部元素载入完成后才干运行。

$(document).ready()是DOM结构绘制完成后就运行，不必等到载入完成后。

window.onload不能同一时候编写多个，假设有多个window.onload方法，仅仅会运行一个。

$(document).ready()能够同一时候编写多个。而且都能够得到运行。

转载地址：https://kevin.blog.csdn.net/article/details/81185657 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！