当大家使用window.onload执行一个函数时,必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多,所以需要很多时间下载。更令人尴尬的是,当网页文档(或者说Dom)已经加载完毕,而图片尚未加载完毕,很多用户已经开始浏览网页,但这时很多由window.onload所触发的函数不能执行,这就导致一部分功能不能完美地给用户使用,更严重的是会给用户留下不好的印象!
现在,我们来研究一下如何解决这个问题,解决方法就是在DOM加载完毕之后就执行程序。
先介绍两个人。一,jquery的作者:John Resig;二,javascript的世界级大师:dean edwards。(大家要记住这两位天才!)
jquery里有专门解决DOM加载的函数$(document).ready()(简写就是$(fn)),非常好用!John Resig在《Pro JavaScript Techniques》里,有这样一个方法处理DOM加载,原理就是通过document&& document.getElementsByTagName &&document.getElementById&& document.body 去判断Dom树是否加载完毕。代码如下:function domReady( f ) {
// 如果DOM加载完毕,马上执行函数
if ( domReady.done ) return f();
// 假如我们已增加一个函数
if ( domReady.timer ) {
// 把它加入待执行的函数清单中
domReady.ready.push( f );
} else {
// 为页面加载完成绑定一个事件,
// 为防止它最先完成. 使用 addEvent(下面列出).
addEvent( window, “load”, isDOMReady );
// 初始化待执行的函数的数组
domReady.ready = [ f ];
// 经可能快地检查Dom是否已可用
domReady.timer = setInterval( isDOMReady, 13 );
}
}
// 检查Dom是否已可操作
function isDOMReady() {
// 假如已检查出Dom已可用, 忽略
if ( domReady.done ) return false;
// 检查若干函数和元素是否可用
if ( document &&document.getElementsByTagName &&document.getElementById &&document.body ) {
// 假如可用, 停止检查
clearInterval( domReady.timer );
domReady.timer = null;
// 执行所有等待的函数
for ( var i = 0; i
domReady.ready[1i]();
// 记录在此已经完成
domReady.ready = null;
domReady.done = true;
}
}
// 由 Dean Edwards 在2005 所编写addEvent/removeEvent,
// 由 Tino Zijdel整理
//
http://dean.edwards.name/weblog/2005/10/add-event/
//优点是1.可以在所有浏览器工作;
//2.this指向当前元素;
//3.综合了所有浏览器防止默认行为和阻止事件冒泡的的函数
//缺点就是仅在冒泡阶段工作
function addEvent(element, type, handler) {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(window.event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[1i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};[/1i][/1i]
还有一个估计由几个外国大师合作写的,实现同样功能。 /*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready.js Prototype extension
* and Simon Willison's addLoadEvent
*
* For more info, see:
*
http://www.thefutureoftheweb.com/blog/adddomloadevent
*
http://dean.edwards.name/weblog/2006/06/again/
*
http://www.vivabit.com/bollocks/ ... nsion-for-prototype
*
http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
*
* To use: call addDOMLoadEvent one or more times with functions, ie:
*
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // do other stuff
* });
*
*/
addDOMLoadEvent = (function(){
// create event function stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done = true;
// kill the timer
clearInterval(load_timer);
// execute each function in the stack in the order they were added
while (exec = load_events.shift())
exec();
if (script) script.onreadystatechange = '';
};
return function (func) {
// if the init function was already ran, just run this function now and stop
if (done) return func();
if (!load_events[0]) {
// for Mozilla/Opera9
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
document.write("");
script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete")
init(); // call the onload handler
};
/*@end @*/
// for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff
load_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState))
init(); // call the onload handler
}, 10);
}
// for other browsers set the window.onload, but also execute the old window.onload
old_onload = window.onload;
window.onload = function() {
init();
if (old_onload) old_onload();
};
}
load_events.push(func);
}
})();
分享到:
相关推荐
现在,我们来研究一下如何解决这个问题,解决方法就是在DOM加载完毕之后就执行程序。 先介绍两个人。一,jquery的作者:John Resig;二,javascript的世界级大师:dean edwards。(大家要记住这两位天才!) ...
7.2 如何显示图片直到页面加载完成 7.3 预加载显示图片的方法 7.4 Facebook风格的图片预加载 7.5 检查图片src是否有效 7.6 上下滑动的图片 7.7 淡入淡出一幅图片,进入另一幅图片 7.8 获取图片原生尺寸的方法 7.9 ...
网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差...
4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...
4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...
(1) 当dom加载完就可以执行了。 代码1同时做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性...
img.JPG onblur事件中加载的图片文件。 第8章(\c08) 示例描述:学习JavaScript中的document对象。 8.1.html 得到文档锚点对象数组。 8.2.html 获取并设置cookie信息。 8.3.html 获取文档标记的...
10.5.2 jQuery在其他库后导入/328 10.6 使用子查询优化选择器性能/330 10.7 减少对DOM元素直接操作/332 10.8 正确区分DOM对象与jQuery对象/334 10.8.1 DOM对象与jQuery对象的定义/334 10.8.2 DOM对象与jQuery...
利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
16.12 在UNIX中将主脚本和模块绑成一个可执行文件 587 第17章 扩展和嵌入 590 引言 590 17.1 实现一个简单的扩展类型 592 17.2 用Pyrex实现一个简单的扩展类型 597 17.3 在Python中使用C++库 598 17.4 调用...
利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
6.右边窗口停止抓包后显示十六进制数 hyperlink 自绘CStatic,实现超链接。 iconbutton_demo 演示了多种自绘Button。 IDocHostUIHandler Extended CHtmlView 如题。 IM_毕业设计 聊天系统,操作了数据库,有...
如何加载图片? 66.什么是模态对话框? 67.阐述MVC的概念 68.GUI布局管理器的使用,FlowLayout,BorderLayout,GridBagLayout 69.如何构造一棵树?选择树的一个节点时,如何得到这个节点? 70.向编辑框中输入字符...
11.2.6 缓存后替换和部分页缓存 11.2.7 缓存用户配置 11.2.8 缓存配置 11.2.9 输出缓存扩展 11.3 数据缓存 11.3.1 向缓存添加项目 11.3.2 简单的缓存测试 11.3.3 缓存优先级 11.3.4 使用数据源...
11.2.6 缓存后替换和部分页缓存 365 11.2.7 缓存用户配置 367 11.2.8 缓存配置 368 11.2.9 输出缓存扩展 369 11.3 数据缓存 373 11.3.1 向缓存添加项目 373 11.3.2 简单的缓存测试 375 11.3.3 缓存...