引入外部js文件的加载

78 阅读 0 评论 52 点赞

我是靠谱客的博主无限斑马，最近开发中收集的这篇文章主要介绍引入外部js文件的加载，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

近日做了一个阿里云点播的上传和播放，需要在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中引入的外部资源的加载方式默认是异步的，但却没什么卵用。