在jQuery中,要做到"等网页载入后再执行",我们有两种选择
$(document).ready(fn) 与 $(window).load(fn)
二者的差别在于:
$(document).ready(fn)发生在"网页本身的HTML"载入后就触发,
$(window).load(fn)则会等到"网页HTML标签中引用的图档、内嵌物件(如Flash)、IFrame"等拉哩拉杂的东西都载入后才会触发。
一般来说,等网页全部元素都载入才执行程式时机有点晚,因为在此之前,使用者已经可以点选操作网页,跳脱我们程式的掌控范围。因此,我们几乎都是将程式放在$(document).read(function() { ... })中(即$(function() { … }))。
$(window).load(fn)适合执行一些要等待图档或元素全部载入才可进行的动作,例如:检查图档长宽。换句话说,上回的大图自动缩小Script可以透过$(window).load(fn)改写得更简单,完全不用担心图档没下载完成时的特殊处理,算是一个很好的应用范例。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script type="text/javascript">
$(function() {
alert("ready event!");
});
$(window).load(function(){
alert("load event!");
});
</script>
</head>
<body>
<img src="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg" />
</body>
</html>
分享到:
相关推荐
前端项目-jquery-lazyload-any,jquery插件为图像、iframe或任何东西提供了lazyload函数。
前端开源库-jquery-lazyloadjquery lazyload,使用jquery的lazyload图像
JavaScript - jQuery实现短信验证码注册登录完整示例:JavaScript - jQuery和附件说明
jquery-1.12.4.min.js
JavaScript实现短信验证码注册登录的三种方法,内附:JavaScript - Fetch.js、JavaScript - jQuery、JavaScript - XHR.js文件和说明。
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
前端项目-jquery.loadtemplate,用于加载和使用模板的jquery插件。该插件设计简单但功能强大,支持从页面内加载模板,或使用Ajax加载HTML文件。
artech-javascript-jquery-11
artech-javascript-jquery-13
artech-javascript-jquery-10
artech-javascript-jquery-12
artech-javascript-jquery-14
artech-javascript-jquery-15
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jquery实现多国语言包。利用这个动态加载页面和事先写好的语言类型可以比微软推出的更简单的实现多国化
JS-Ajax-jQuery笔记,学习笔记,JavaScript,JS-Ajax-jQuery笔记,学习笔记,JavaScript,
攀枝花学院html-css-js-jQuery-ajax 前端实验
第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通JavaScript+jQuery] 第3课 - CSS基础 - [精通JavaScript+jQuery] 第4课 - CSS进阶 - [精通JavaScript+jQuery] 第5课 - DOM...
5.JavaScript-jQuery