源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-08-21 16:52 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Dom加载让图片加载完再执行的脚本代码
现在,我们来研究一下如何解决这个问题,解决方法就是在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树是否加载完毕。代码如下:
[u]复制代码[/u] 代码如下:
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; };
还有一个估计由几个外国大师合作写的,实现同样功能。
[u]复制代码[/u] 代码如下:
/* * (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);     } })();
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部