Dom加载让图片加载完再执行的脚本代码


Posted in Javascript onMay 15, 2008

现在,我们来研究一下如何解决这个问题,解决方法就是在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.length; i++ )  
domReady.ready[i]();    
// 记录在此已经完成 
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[i]; 
        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; 
};

还有一个估计由几个外国大师合作写的,实现同样功能。
/* 
* (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/2006/06/21/a-dom-ready-extension-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 id=__ie_onload defer src=//0><\/scr"+"ipt>"); 
                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); 
    } 
})();
Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
js登录弹出层特效
Mar 07 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
直接生成打开窗口代码,不必下载
May 14 #Javascript
地震发生中逃生十大法则
May 12 #Javascript
通过修改referer下载文件的方法
May 11 #Javascript
JS启动应用程序的一个简单例子
May 11 #Javascript
一段利用WSH获取登录时间的jscript代码
May 11 #Javascript
一段利用WSH修改和查看IP配置的代码
May 11 #Javascript
JS处理VBArray的函数使用说明
May 11 #Javascript
You might like
php 获取可变函数参数的函数
2009/08/26 PHP
如何用php获取文件名后缀
2013/06/09 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
犀利的js 函数集合
2009/06/11 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
python读取LMDB中图像的方法
2018/07/02 Python
使用Scrapy爬取动态数据
2018/10/21 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
python中最小二乘法详细讲解
2021/02/19 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
查环查孕证明
2014/01/10 职场文书
政工师工作总结2015
2015/05/26 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
MySQL数据库完全卸载的方法
2022/03/03 MySQL
ipad隐藏软件app图标方法
2022/04/19 数码科技
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python