页面加载-自动运行（方法总结）

约定不等于承诺〃 2021-11-27 06:38 309阅读 0赞

# 一、在 HTML 中： #

# 二、在 JavaScript 中： #

……onload 事件会在页面或图像加载完成后立即发生。

# **三、在jQuery中：** #

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    <script>
    
    	function ShowMessage(){
    		alert("小白来啦！");
    	}
     /*    //语法 1：
    	$(document).ready(function(){
    		ShowMessage()
    	});
    	//语法 2：
    	$().ready(function(){
    		ShowMessage()
    	});  */
    	//语法 3：
    	$(function(){
    		ShowMessage()
    	});
        
        //语法 4：
        jQuery(function($) {
    		ShowMessage()
    	});
    
    </script>
    </head>
    
    <body>
    	<h1>HelloBigBang!</h1>
    </body>
    
    </html>

提示：ready() 函数不应与 <body οnlοad=""> 一起使用。

$(function()\{\}) 和 $(document).ready(function()\{\})，这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数,（注意，这里面的ready 是 DOM树加载完成，不是onload的页面资源加载完成的）。

需要注意的是，原生js本身并没有提供 document.ready方法，要使用就得自己定义，而且过程较为复杂，有兴趣可以自己了解一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70][]

# 四、个人经验 #

写代码的时候遇到了个很奇葩的问题。

$(function() {
    	$.messager.show({
    		title : '小提示',
    		msg : '隐藏的信息请拖动列表查看！'
    	});
    });

这段代码突然间失效了！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1][]

超级过分，浪费我时间，最后设置了setTimeout方法来解决这个问题。

setTimeout(function () {
           $.messager.show({
                title : '小提示',
                msg : '隐藏的信息请拖动列表查看！'
            });
      }, 5);

好了，这个话题总结到这，欢迎各位纠错哦！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70]: /images/20211126/036121fe153746d2a73391cbc2c36db8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1]: /images/20211126/804f8ecc5c6d45edbb1e8f899d21c595.png