近日做了一个阿里云点播的上传和播放,需要在JSP页面中引入阿里云点播提供的js文件,通过<script>标签将需要的js引入。
在dom加载完成之后执行$(function(){})中的代码去创建阿里云的js提供的对象,结果却报错了:说阿里云提供的一个js对象没有定义。很奇怪,js文件明明引入了,而且通过F12的NetWork可以看到文件引入也是成功的,这是为什么呢?
原因在于$(function(){})中的代码的执行时机仅仅是在dom的结构全部加载完成之后,而不是在dom中的所有外部资源(js、图片等)加载完成之后执行,此时可以使用window.onload来代替$(function(){}),因为window.onload是在dom结构及其外部资源全部加载完成之后才会执行的。
还有一种方式将js的引入放在<body>标签中而不是<head>中,<body>中的内容是从先向后同步加载的,<head>中则可能会异步加载。
按说还有一种方式:在引入外部js的<script>标签中指定其async属性为false,即<script async="false" src="..."></script>将外部js文件的加载改为同步加载,此时再使用$(function(){})就没有问题了,这说明dom中引入的外部资源的加载方式默认是异步的,但却没什么卵用。