`
meikanbao
  • 浏览: 14882 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
最近访客 更多访客>>
社区版块
存档分类
最新评论

DOM加载图片完成后在执行显示

 
阅读更多

                   
                                                                当大家使用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加载让图片加载完再执行的脚本代码

    现在,我们来研究一下如何解决这个问题,解决方法就是在DOM加载完毕之后就执行程序。 先介绍两个人。一,jquery的作者:John Resig;二,javascript的世界级大师:dean edwards。(大家要记住这两位天才!) ...

    超实用的jQuery代码段

    7.2 如何显示图片直到页面加载完成 7.3 预加载显示图片的方法 7.4 Facebook风格的图片预加载 7.5 检查图片src是否有效 7.6 上下滑动的图片 7.7 淡入淡出一幅图片,进入另一幅图片 7.8 获取图片原生尺寸的方法 7.9 ...

    jquery的$(document).ready()和onload的加载顺序

    网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差...

    《程序天下:JavaScript实例自学手册》光盘源码

    4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...

    程序天下:JavaScript实例自学手册

    4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...

    jquery插件使用方法大全

    (1) 当dom加载完就可以执行了。 代码1同时做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性...

    JavaScript完全自学宝典 源代码

    img.JPG onblur事件中加载的图片文件。 第8章(\c08) 示例描述:学习JavaScript中的document对象。 8.1.html 得到文档锚点对象数组。 8.2.html 获取并设置cookie信息。 8.3.html 获取文档标记的...

    jQuery权威指南-源代码

    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...

    vc++ 应用源码包_6

    利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...

    Python Cookbook

    16.12 在UNIX中将主脚本和模块绑成一个可执行文件 587 第17章 扩展和嵌入 590 引言 590 17.1 实现一个简单的扩展类型 592 17.2 用Pyrex实现一个简单的扩展类型 597 17.3 在Python中使用C++库 598 17.4 调用...

    vc++ 应用源码包_5

    利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...

    vc++ 应用源码包_3

    利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...

    vc++ 应用源码包_1

    利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...

    vc++ 应用源码包_2

    利用Delphi的代码在VC中显示JPG图片,不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...

    vc++ 开发实例源码包

    6.右边窗口停止抓包后显示十六进制数 hyperlink 自绘CStatic,实现超链接。 iconbutton_demo 演示了多种自绘Button。 IDocHostUIHandler Extended CHtmlView 如题。 IM_毕业设计 聊天系统,操作了数据库,有...

    JAVA面试题最全集

    如何加载图片? 66.什么是模态对话框? 67.阐述MVC的概念 68.GUI布局管理器的使用,FlowLayout,BorderLayout,GridBagLayout 69.如何构造一棵树?选择树的一个节点时,如何得到这个节点? 70.向编辑框中输入字符...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    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 使用数据源...

    ASP.NET4高级程序设计(第4版) 3/3

    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 缓存...

Global site tag (gtag.js) - Google Analytics