使用jQuery在DOM或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!'); });
© 2021 谈谈IT All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero