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 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
javascript的console.log()用法小结
May 31 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
Javascript中With语句用法实例
May 14 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
javascript实现随机抽奖功能
Dec 30 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
浅析javascript的return语句
2015/12/15 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
Python中extend和append的区别讲解
2019/01/24 Python
python处理大日志文件
2019/07/23 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
python编程的核心知识点总结
2021/02/08 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
大学生实习证明范本
2014/01/15 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
财务主管岗位职责
2014/02/28 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Python requests用法和django后台处理详解
2022/03/19 Python
php解析非标准json、非规范json的方式实例
2022/05/10 PHP