在HTML页面加载完毕后执行某个js

我就是我 2022-05-10 14:24 454阅读 0赞

在DOM加载完就可以执行（比window.onload更早）。**在同一页面中可以多次出现****.ready()**

**两者主要区别：Window.οnlοad=function ()\{\}:**

当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。

**$(document).ready(function ()\{\});**

会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。换句话说，当HTML下载完成并解析为DOM树之后，代码就会执行。

使用$(document).ready(function ()\{\})一般来说都要优于使用onload事件处理程序，但必须要明确一点，因为支持文件可能还没有加载完成，所以类似图像的高度和宽度这样的属性此时不一定有效。

**Js方法：**

<script type=”text/javascript”>
    
    window.onload = function (){
    
        var userName=”xiaoming”;
    
        alert(userName);
    
    }
    </script>

**jQuery方法，需要引用jQuery文件：**

<script type=”text/javascript”>
    
    $(document).ready(function (){
    
        var userName=”xiaoming”;
    
        alert(userName);
    
    });
    </script>

**或者其简写：**

$(function (){
    
    var userName=”xiaoming”;
    
    alert(userName);
    
    });

**注：用把js放在页面底部的方法以及运用defer=”defer”的方法都是会出现问题的。最好使用$(document).ready(function ()\{\})函数。**

发表评论取消回复

表情：

评论列表（有 0 条评论，454人围观）

还没有评论，来说两句吧...

相关阅读

相关等待JS加载完成后执行方法

loadScript:function(src, callback) { layer.load(2);

小灰灰/ 2023年10月11日 12:46/ 0 赞/ 12 阅读

相关页面加载完成后执行的动作

1.想要一个页面在加载完成就去提交一个表单，frm1为表单的id <script> document.getElementById("frm1").sub

你的名字/ 2022年09月23日 08:47/ 0 赞/ 183 阅读

相关 JS页面加载完毕后执行的多种方式和比较

做项目的时候可能会遇到这种情况: 一个页面的中定义了多个onload事件,那么在此定义window.onload函数的时候可能会不生效或者多个onload之间覆盖的现象.

本是古典何须时尚/ 2022年09月21日 01:48/ 0 赞/ 199 阅读

相关在页面加载完成后执行任务

方式一：通过JavaScript注册事件处理程序的传统机制是，把一个函数指定给DOM元素的对应属性。例如，假设我们已经定义了如下函数： function doStuff

向右看齐/ 2022年07月14日 09:56/ 0 赞/ 181 阅读

相关两种方法实现在HTML页面加载完毕后运行某个js

window.onload：当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元

小咪咪/ 2022年06月13日 09:22/ 0 赞/ 243 阅读

相关 JS addLoadEvent函数，在页面加载完毕后立刻执行多个函数

onload事件是HTML DOM Event 对象的一个属性，又叫事件句柄（Event Handlers），它会在页面或图像加载完成后（注意是加载完成后）立即发生。 win

迈不过友情╰/ 2022年05月15日 15:14/ 0 赞/ 177 阅读

相关 JS实现页面加载完毕之前loading提示效果

引用：http://qubernet.blog.163.com/blog/static/1779472842014510392573/ 做成js调用： ![Center][

亦凉/ 2022年05月12日 01:04/ 0 赞/ 192 阅读

相关在HTML页面加载完毕后执行某个js

在DOM加载完就可以执行（比window.onload更早）。在同一页面中可以多次出现.ready() 两者主要区别：Window.οnlοad=function ()\{\

我就是我/ 2022年05月10日 14:24/ 0 赞/ 455 阅读

相关 JS，两种在页面加载完成后自动执行的方法（ready，onload）

JS，两种在页面加载完成后自动执行的方法 1.jQuery的ready事件，需要引入jQuery的包才能使用，表示文档结构已经加载完成（不包含图片等非文字媒体文件）； re

ゞ浴缸里的玫瑰/ 2022年02月15日 15:23/ 0 赞/ 2081 阅读

相关 JQuery 页面加载完成后执行事件

一: $(document).ready(function(){ //code }) 二: jQuery(document).ready(function(){ ...

你的名字/ 2021年03月17日 15:48/ 0 赞/ 724 阅读