html加载顺序、onload、JQ.ready()
来源:互联网 发布:软件工程技术 编辑:程序博客网 时间:2024/04/28 10:26
HTML加载顺序
1. html文档中的所有dom标签会被按顺序加载包括css、js的内和外引用,在所有浏览器中都是如此。
1.1 仅有一个特殊情况:当使用document.write("js外引用地址");引用js时,IE不会去及时的加载和执行所引用的js。
解决方案:因为dom是一个标签一个标签加载,为了使后面的js代码使用到了这个外部js内容是不会找不到,可以将这段引用js的输出语句单独写在一个语句块中<script type="text/javascript">******</script>保证它一定被使用。
<span style="font-size:14px;"><script type="text/jscript"> document.write('<script type="text/javascript" src="test.js"></script></script></span>
1.2 也就是说html是同步加载(阻塞加载)的,前面的没有加载完,后边的不会被加载。比如:前面js写了个alert();那么你不去点这个alert的话,后面的所有元素都会在那等着被解析。
1.3 特别提醒:html文档并不十分严谨,即使你在<html></html>外面写div,js也是一样能被加载。
onload事件
1. onload是window对象的事件,它在窗口中所有东西都加载完时会被触发。记住它是窗口(window)中所有东西而不是文档(document),意味着如果你嵌入了<iframe>或者使用了<frameset>,而其中引用了很大的图片,此事件也会等图片完全加载了才去执行。
2. 当你有需要在window中所有东西都加载完时才去执行的js代码,你可以使用它。但大部分情况下,你的js不需要也不想等window全部加载完。
为什么需要ready()?
1.1 从目的来说,使用ready()函数的原因是你需要一个jquery环境来放置JQ相关代码;JQ团队让你将JQ代码放入一个ready()函数中,他们来保证你写的JQ代码一定能找得到JQ.js中的东西。
1.2 那么我们来看看他们是怎么写这个方法的:<span style="font-size:18px;">jQuery.ready.promise = function( obj ) {if ( !readyList ) {readyList = jQuery.Deferred();// Catch cases where $(document).ready() is called after the browser event has already occurred.// we once tried to use readyState "interactive" here, but it caused issues like the one// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15if ( document.readyState === "complete" ) {// Handle it asynchronously to allow scripts the opportunity to delay readysetTimeout( jQuery.ready );// Standards-based browsers support DOMContentLoaded} else if ( document.addEventListener ) {// Use the handy event callbackdocument.addEventListener( "DOMContentLoaded", completed, false );// A fallback to window.onload, that will always workwindow.addEventListener( "load", completed, false );// If IE event model is used} else {// Ensure firing before onload, maybe late but safe also for iframesdocument.attachEvent( "onreadystatechange", completed );// A fallback to window.onload, that will always workwindow.attachEvent( "onload", completed );// If IE and not a frame// continually check to see if the document is readyvar 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 );}// detach all dom ready eventsdetach();// and execute any waiting functionsjQuery.ready();}})();}}}return readyList.promise( obj );};</span>总结其代码逻辑来说:
1. 概念:
1.1 理想的文档加载完==*.html中所有标签元素加载完 ;这包括js、css的内外引用,不(想)包括图片、iframe和frameset引用的html中所有内容..(其他没测试)。
1.2 准备好ready:JQ定义的一个时间点,不同浏览器不同,JQ非常想使他们统一到一个时间点,但事实并不是,总有些差别。
1.2 标准浏览器:IE9+、FireFox、Chrome、Opera、Safari;他们支持addEventListener事件监听和DOMContentLoaded事件。
2. 流程
a:如果是标准浏览器:先使用标准浏览器都支持的事件DOMContentLoaded来判断文档是否加载完,加载完就认为ready,执行程序员自定义的ready内容。最不济,使用window.onload来触发你的ready代码。
b:如果不是标准浏览器(就是IE低版本):那就用onreadystatechage来判断文档是否加载完,认为ready。最不济也用window.onload。
b继续,如果是顶层(也就是说不是frame之类的),那么就认为top.doScroll("left");不抛出异常时认为ready。
3. 事实上
JQ非常想要统一其函数在所有浏览器上的体验,包括ready,但是“人生之不如意,十之八九”。
举个例子,IE11支持DOMContentLoaded,那么他会在这个事件发生后执行你的ready,但是如果有iframe和frameset的话IE11默认frame中内嵌的html文档完毕之后才会触发顶级文档的DOMContentLoaded。而Chrome测试就是不等frame中内嵌的html文档加载就会触发。还是不一样。
4. 所以
写JQ方法,请把内容写在ready()中(大多数情况下合适,也可能不合适),JQ团队尽量保证所有浏览器的统一体验。如有不测风云,造成代码错误,请明白我上面说的这些逻辑,然后请自行调试…
- html加载顺序、onload、JQ.ready()
- 加载顺序 ready onload onreadystatechange
- window.onload和$(document).ready()的加载执行顺序
- jquery.ready与window.onload执行顺序
- 关于HTML页面中JS/JQ/Onload执行顺序测试代码
- jq的 $(function(){}) , document.ready 与 window.onload 的区别
- $().ready onload
- js在html中的加载执行顺序,多个jquery ready执行顺序
- DOMContentLoaded与onload加载顺序
- html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比
- jquery中DOM加载事件,onload事件和ready事件
- html——windows.onload()与$(document).ready()区别
- 一、jQuery $(document).ready()执行顺序-------------二、jquery $(document).ready() 与window.onload的区别
- $(document).ready()加载顺序和事件
- DOM ready与onload
- ready和onload方法
- $.ready和onload 区别
- $.ready和onload 区别
- 典型动态规划之Always On the Run
- LeetCode题解——Remove Linked List Elements
- 202.Happy Number
- Valid Palindrome
- Java 内存区域和GC机制
- html加载顺序、onload、JQ.ready()
- 自动化运维软件设计实战——互动出版网
- Js 动态插入css js文件
- Linux 多线程调试(内存占用、死循环、CPU占用率高……)
- 可以将excel转换成pdf的方法
- Android中定时执行任务的3种实现方法
- 内存对齐的影响
- 玩转Android---UI篇---GridView(网格布局)
- Term::ANSIColor 使用