js和 jquery 页面加载初始化方法_js加载变量$(document).初始化-优快云博客

1.body 增加onload事件并绑定函数。

页面元素全部加载完执行。（包括图片视频）

// 1.在body里面写初始化方法.
<body onload='init()'>
</body>

<script type="text/javascript">
    function init(){
         // 初始化内容       
    }
</script>

window.onload方式。
方式1和方式2并存时。方式1会生效，方式2会失效。
当有多个window.onload时，只会执行最后一个。
页面元素全部加载完执行。（包括图片视频）

// 2.window.function(){}
<script type="text/javascript">
    window.onload=function(){ 
        // 初始化内容 
    }
</script>

3.写初始化方法,页面顺序执行到初始化方法时初始化。该方式优先级最高


<script type="text/javascript">
    function init() { 
        // 初始化内容
    }; 
    init(); 
</script>

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕

方式一：$(function(){})

<script type="text/javascript">
    $(function() {// 初始化内容
    });  
</script>

方式二：$(document).ready(function(){})

它可以编写多个，并且每一个都会执行。
当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

<script type="text/javascript">
    $(document).ready(function(){  
        // 初始化内容
    });  
</script>

// ready()函数有以下三种等价的形式
function handler(){
//这里是需要执行的代码
}

// 形式1
$(document).ready( handler );
// 形式2
$( ).ready( handler ); // 不推荐该形式
// 形式3
$( handler );

方式三：jQuery(function($){})

<script type="text/javascript">
   jQuery(function($){  
       // 初始化内容
   });  
</script>

三.jquery和js初始化加载页面的区别
jquery：等待页面加载完数据，以及页面部分元素（不包括图片、视频），
js：是页面全部加载完成才执行初始化加载

document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件
一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。