使用 jQuery 在 DOM 或 window 加载后执行动作

字数444 大约花费2分钟

目录

  1. 1. 使用 ready 方法定义在 DOM 被加载后执行的动作
    1. 1.1. 三种语法
  2. 2. 使用 load 方法定义在 window 完全加载后执行的动作

页面上的 javascript 执行,除了用户主动交互的事件外,都是在 DOM 加载完成或 window 完全加载后执行的(甚至连定时事件也是在此时开始计时)。以下分别分析 jQuery 针对这两种情况的处理。

使用 ready 方法定义在 DOM 被加载后执行的动作

在 DOM 被加载后执行,不必等要页面元素都渲染完。

三种语法

1
2
3
4
5
6
7
8
9
10
// Standard.
jQuery(document).ready(function () { alert('DOM is ready!'); });
// Shortcut, but same thing as above.
jQuery(function () { alert('No really, the DOM is ready!'); });
// Shortcut with fail-safe usage of $. Keep in mind that a reference
// to the jQuery function is passed into the anonymous function.
jQuery(function ($) {
alert('Seriously its ready!');
// Use $() without fear of conflicts.
});

其中

1
jQuery(function () { alert('No really, the DOM is ready!'); });

可能会和插件冲突,所以像下面这样加个 $ 比较好

1
2
3
4
jQuery(function ($) {
alert('Seriously its ready!');
// Use $() without fear of conflicts.
});

为了保证 DOM 中的元素在 ready 方法前真的完全加载了,需要将 css 文件放在 jQuery 代码的前面,因为有些 css 伪类会处理或添加标签。

使用 load 方法定义在 window 完全加载后执行的动作

将 window 对象作为参数传给 jQuery 方法,调用 load 方法,可以定义在 window 完全加载后要执行的动作。此时,所有的外部文件都加载完了(当然,图片可能渲染完也可能在渲染中)

1
2
3
// Pass window to the jQuery function and attach
// event handler using the load() method shortcut.
jQuery(window).load(function(){ alert('The page and all its assets are loaded!'); });

谈谈 IT的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/shi-yong-jquery-zai-dom-huo-window-jia-zai-hou-zhi-xing-dong-zuo/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章