- 浏览: 448361 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
1. DOMContentLoaded 在页面html、script、style加载完毕即可触发,无需等待所有资源(image/iframe)加载完毕。(IE9+)
2. onload是最早支持的事件,要求所有资源加载完毕触发。
3. onreadystatechange 开始在IE引入,后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, frame, frameset, iframe, img, input:image, link, script, xml
标签的元素,都触发该事件。通常来讲,会有 loading /interactive/complete几个状态值。
对于页面加载完毕,检测的是 document.readystate === "complete" 状态。就目前IE6~8的测试结果来看,这个事件的触发约等同于 onload 事件,触发顺序上onload在后面。
其它需要注意的是:
1. IE11+,对于script标签,onreadystatechange不再受支持,请用onload来判断js的加载完成。
(查看;https://msdn.microsoft.com/en-us/library/ms536957(v=vs.85).aspx)
2. 在IE中,document.readystate === "interactive" ,在图片、js加载完成之前就已经触发,所以不能用来模拟 DOMContentLoaded 事件。
(示例代码源自:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState 。)
3. 如果你在onload的事件函数里面,再次监听 onload事件,那么,是不会再次触发函数的。
(查看:http://www.stevesouders.com/blog/2014/09/12/onload-in-onload/)
因此,对于异步加载的JS,为了保证js能在onload里面触发,可以先判断 document.readystate === "complete",如果成功,则立即执行函数。
4. 最后,看看jQuery1.8里面,有关 ready 函数的实现:
https://msdn.microsoft.com/en-us/library/ms536957(v=vs.85).aspx
https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState
http://www.stevesouders.com/blog/2014/09/12/onload-in-onload/
2. onload是最早支持的事件,要求所有资源加载完毕触发。
3. onreadystatechange 开始在IE引入,后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, frame, frameset, iframe, img, input:image, link, script, xml
标签的元素,都触发该事件。通常来讲,会有 loading /interactive/complete几个状态值。
对于页面加载完毕,检测的是 document.readystate === "complete" 状态。就目前IE6~8的测试结果来看,这个事件的触发约等同于 onload 事件,触发顺序上onload在后面。
其它需要注意的是:
1. IE11+,对于script标签,onreadystatechange不再受支持,请用onload来判断js的加载完成。
(查看;https://msdn.microsoft.com/en-us/library/ms536957(v=vs.85).aspx)
2. 在IE中,document.readystate === "interactive" ,在图片、js加载完成之前就已经触发,所以不能用来模拟 DOMContentLoaded 事件。
// 模拟DOMContentLoaded ------- 不要这样用,这是错误的。 document.onreadystatechange = function () { if (document.readyState == "interactive") { initApplication(); } }
(示例代码源自:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState 。)
3. 如果你在onload的事件函数里面,再次监听 onload事件,那么,是不会再次触发函数的。
function addOnload(callback) { if ( "undefined" != typeof(window.attachEvent) ) { return window.attachEvent("onload", callback); } else if ( window.addEventListener ){ return window.addEventListener("load", callback, false); } } function onload1() { document.getElementById('results').innerHTML += "First onload executed."; //没用的,onload2是不会被调用的. addOnload(onload2); } function onload2() { document.getElementById('results').innerHTML += "Second onload executed."; } addOnload(onload1);
(查看:http://www.stevesouders.com/blog/2014/09/12/onload-in-onload/)
因此,对于异步加载的JS,为了保证js能在onload里面触发,可以先判断 document.readystate === "complete",如果成功,则立即执行函数。
4. 最后,看看jQuery1.8里面,有关 ready 函数的实现:
// The ready event handler and self cleanup method DOMContentLoaded = function() { if ( document.addEventListener ) { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); jQuery.ready(); } else if ( document.readyState === "complete" ) { // we're here because readyState === "complete" in oldIE // which is good enough for us to call the dom ready! document.detachEvent( "onreadystatechange", DOMContentLoaded ); jQuery.ready(); } }, //////////////////////////////////////////////// jQuery.ready.promise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); // Catch cases where $(document).ready() is called after the // browser event has already occurred. if ( document.readyState === "complete" || ( document.readyState !== "loading" && document.addEventListener ) ) { // Handle it asynchronously to allow scripts the opportunity to delay ready setTimeout( jQuery.ready, 1 ); // Standards-based browsers support DOMContentLoaded } else if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used } else { // Ensure firing before onload, maybe late but safe also for iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready ); // If IE and not a frame // continually check to see if the document is ready var top = false; try { top = window.frameElement == null && document.documentElement; } catch(e) {} if ( top && top.doScroll ) { (function doScrollCheck() { if ( !jQuery.isReady ) { try { // Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ top.doScroll("left"); } catch(e) { return setTimeout( doScrollCheck, 50 ); } // and execute any waiting functions jQuery.ready(); } })(); } } } return readyList.promise( obj ); };
https://msdn.microsoft.com/en-us/library/ms536957(v=vs.85).aspx
https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState
http://www.stevesouders.com/blog/2014/09/12/onload-in-onload/
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1691:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
grunt构建基于seajs的网站实现
2015-06-16 16:49 1126Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 4013优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3955https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4440scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1738skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1783<!DOCTYPE html> < ... -
icon font VS svg font
2015-05-14 15:21 1210关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22631var gulp = require('gulp'); ... -
简单的css3全屏滚动
2015-04-27 16:41 1449<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 11996插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番 ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3832【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1658移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 532在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 934function repeatStr(ch, n){ ... -
getBoundingClientRect 跨浏览器实现
2015-03-18 18:30 1104<head> <script ... -
window.name 跨域
2015-03-18 17:29 898window.name跨域的基础是:iframe页面在其url ... -
window.name 跨域
2015-03-18 17:27 1window.name跨域的基础是:iframe页面在其ur ... -
HTML History API
2015-03-13 18:05 1129// 替换当前浏览器history的最后一项记录。 hi ... -
Emberjs学习
2015-01-27 17:13 4148断断续续看了3周,还是一头雾水,文档不是很友好,这个框架,太多 ...
相关推荐
另外,可以考虑使用`window.onload`或`DOMContentLoaded`事件来确保整个页面资源(包括外部样式表)加载完毕后再执行特定操作。 总的来说,onload和onreadystatechange事件在浏览器之间的支持并不统一,这要求...
总之,对于跨浏览器的`iframe`加载事件处理,推荐使用`onload`事件,同时考虑使用`DOMContentLoaded`或`readystatechange`(在支持的浏览器中)作为补充,以确保在不同环境下都能正确地检测到`iframe`的加载状态。...
对于不支持`DOMContentLoaded`事件的老版本IE浏览器,可以利用`onreadystatechange`事件,特别是当`document.readyState`等于`complete`时。但是,这个事件的可靠性较差,因为它可能在`onload`之后才触发,特别是...
2. 优先考虑使用window.onload或document.addEventListener('DOMContentLoaded', function() {...})方法,而不是document.onreadystatechange,除非需要根据页面加载状态的细微变化进行处理。 3. 如果页面中有多个...
5. 另外,对于旧版IE浏览器,存在一个问题,就是它不支持DOMContentLoaded事件,而且在iframe结构中,当iframe的源与父页面不同时,onreadystatechange事件也会触发,从而导致错误地认为DOM已经加载完成。...
对于老版本的浏览器,可以使用`document.onreadystatechange`或`window.onload`。 ```javascript document.onreadystatechange = function() { if (document.readyState === 'complete') { // 在这里执行你的...
正确的使用window.onload和DOMContentLoaded,可以有效地处理页面加载的顺序问题,提升用户体验。在实际开发中,建议开发者根据具体需求和浏览器兼容性,选择合适的方法来实现DOM元素的最后加载处理。
`window.onload` 是JavaScript中最常见的一个事件,用于在浏览器加载完整个页面(包括所有图像、CSS和JavaScript文件)后触发指定的函数。 然而,不同浏览器对`window.onload` 的处理方式有所不同,导致在跨浏览器...
对于`<iframe>`元素,`DOMContentLoaded`和`onload`事件的触发顺序在IE和非IE浏览器中有所不同。在IE中,主页面的`DOMContentLoaded`事件会等待`iframe`加载完成后再触发,而在非IE浏览器中,`iframe`的加载是异步的...
对于不支持`addEventListener`的浏览器,如IE6、7、8,jQuery会使用`attachEvent`监听`onreadystatechange`事件,以及`onload`事件来确保在页面加载完成后执行代码。此外,对于低版本的IE,还有特殊处理来检测DOM...
6. **兼容性处理**:为了在各种浏览器中实现兼容,可以编写一个通用函数来适配DOMContentLoaded事件和document.onreadystatechange事件。如果存在这些事件,则绑定事件处理函数;如果不存在,比如在IE浏览器中,使用...
考虑到性能和浏览器兼容性,可以使用`DOMContentLoaded`事件替代`window.onload`,它在DOM解析完成时触发,不等待资源加载。如果需要兼容旧版浏览器,可以同时监听这两个事件。 7. **异步加载** 当页面有大量异步...
4. bindReady函数根据当前浏览器的类型和情况,通过不同的方式绑定DOMContentLoaded或onreadystatechange事件。对于IE,利用doScroll方法检测DOM加载状态。 5. ready函数最后通过闭包的方式暴露出来,以便开发者...
在jQuery中,`ready`方法并不是简单的封装`window.onload`或`document.onload`事件,而是利用了标准W3C浏览器的`DOMContentLoaded`事件和针对IE浏览器的一些特定策略来确保在DOM树构建完成时执行代码,而无需等待...
// trying to always fire before onload d.onreadystatechange = function() { if (d.readyState == 'complete') { d.onreadystatechange = null; init(); } }; } ``` 在这个`IEContentLoaded`函数中,我们...
window.attachEvent('onreadystatechange', function() { if (document.readyState === 'complete') { document.body.removeChild(script); } }); } ``` 以上就是关于 `attachEvent` 和 `addEventListener` 的...
此外,还可以利用`onreadystatechange`事件来检测脚本加载状态,一旦`readyState`变为`complete`,则表明脚本已加载并执行完毕,此时调用函数是安全的。 总结来说,动态插入JavaScript脚本代码的关键在于确保脚本...