DOMContentLoaded事件<zz>
今天查看百度空间源代码,发现多了个util.js文件,打开看看。里面里面定义了addDOMLoadEvent。这是干什么用的?
仔细查看代码,发现在Mozilla添加了DOMContentLoaded事件,这个在以前一直没有用过。 if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
好像就是为了兼容实现DOMContentLoaded事件。
网上找了点有关DOMContentLoaded的资料拿来看看。
DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢( 见: Ajax优化(2) -- lazierLoad img && js), 则必然影响用户的体验。
在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。
目前,跨平台的DOMContentLoaded的解决方案有很多, 比如jQuery, Prototype...等等, 其实现原理大同小异.
在项目中, 我使用了Prototype工具, 以往调用初始化的方法是:
现在有了DOMContentLoaded, 可以替换成如下的方法:
最新的prototype中自定义事件已经重新命名, 使用"dom:loaded" 代替了 “contentloaded”.
DOMContentLoaded事件<zz>的更多相关文章
- DOMContentLoaded事件
今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...
- Window.onLoad 和 DOMContentLoaded事件的先后顺序
相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...
- 模拟DOMContentLoaded事件
window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- HTML5-常见的事件- DOMContentLoaded事件
一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则 ...
- HTML load事件和DOMCOntentLoaded事件
JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行” 普通script标签会阻塞DOM的解析 DOMcontentLoa ...
- DOMContentLoaded事件中使用异步
概述 我在之前的博文(Performance面板看js加载)中提到过,如果利用监听DOMContentLoaded事件的方式来加载js是不能优化加载的,不能够替代jquery中的ready方法,原因是 ...
- JS、CSS以及img对DOMContentLoaded事件的影响
最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- 深入理解Javascript封装DOMContentLoaded事件
最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加w ...
随机推荐
- <T extends Serializable>这是什么意思呢?看明白这个,你的问题就自然而然的明白了!
1.转自:https://blog.csdn.net/liwenqiang758/article/details/8131185 自己动手丰衣足食!!! 泛型是Java SE 1.5的新特性,泛型的本 ...
- 使用C#正则表达式获取必应每日图片地址
微软的Bing搜索引擎首页每天都会提供了一些有趣的图片,下面使用正则表达式获取图片的地址,不管是在手机app还是在网站上都是很好的图片素材,而且每天更新,非常不错. 首先访问微软的API,该地址返回的 ...
- div 内容水平垂直居中
对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...
- 信息检索及DM必备知识总结:luncene
原文链接:http://blog.csdn.net/htw2012/article/details/17734529 有少量修改!如有疑问,请访问原作者. 一:信息检索领域: 信息检索和网络数据领域( ...
- 离线安装ADT和sdk
重装Eclipse.离线安装ADT.Android SDK 由于最新的ADT.Android SDK需要最新版本的Eclipse才能使用,我无奈的只好升级Eclipse.看看自己的Eclipse已经两 ...
- (转) RabbitMQ学习之工作队列(java)
http://blog.csdn.net/zhu_tianwei/article/details/40887717 参考:http://blog.csdn.NET/lmj623565791/artic ...
- linux中errno使用(转)
当linux中的C api函数发生异常时,一般会将errno变量(需include errno.h)赋一个整数值,不同的值表示不同的含义,可以通过查看该值推测出错的原因,在实际编程中用这一招解决了不少 ...
- jQuery节点操作方法大全
1.append() 向每个匹配的元素内部追加内容 HTML代码: <p>我想说:</p> jQuery代码: $('p').append('<b>你好</b ...
- vue中使用mui的extra icon问题
1. 元素类名更改 2. mui下的fonts文件夹中添加mui-icons-extra.ttf文件 3. mui下的css文件中添加icons-extra.css文件 4. main.js中导入im ...
- Ajax技术实战操练课堂学习笔记
ajax是什么 ? ajax(asynchronouse javascript and xml) 异步的javascript 和 xml 是7种技术的综合,它包含了七个技术( javascript x ...