javascript实现js脚本的的异步加载

最新推荐文章于 2026-06-18 12:46:34 发布

原创最新推荐文章于 2026-06-18 12:46:34 发布 · 41 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #开发语言 #ecmascript #前端

javascript实现js脚本的的异步加载，和图片的异步加载稍有不同，script的异步加载需要借助dom，因此有了局限性

<html>
	<head>
		<meta charset="utf-8" />
		<title>Javascript</title>
		<meta http-equiv="X-UA-Compatible" content="IE=7">
	</head>
	<body>
		
		<script type="text/javascript" charset="utf-8">

			function loadScript(url,callback)
			{
				

				var script = document.createElement('script');
				if(!!document.setAttribute)
				{

					script.setAttribute('type','text/javascript');
					script.setAttribute('charset','utf-8');
					script.setAttribute('language','javascript');
				}else{
					script['type'] ='text/javascript';
					script['charset'] = 'utf-8';
					script['language'] = 'javascript';
					
				}

				if (!!script.readyState)
				{

					script.onreadystatechange = function()
					{ 
					
						if (script.readyState == "loaded" ||script.readyState == "complete")
						{ 
							script.onreadystatechange = null; 
							callback(script); 
						} 
					}; 
				}else{

					script.onload = function()
					{
						script.onload = null;
						callback(script);
					}
				}

				script['src'] = url;

				document.head.appendChild(script);
			}

			loadScript('https://fbstatic-a.akamaihd.net/rsrc.php/v2/yv/r/wgFc3t0g5gk.js',function(script){
				console.log(script);
			});
			
		</script>
	</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~2014-11-30 更新~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1. defer下载脚本（异步下载，当网页加载完后才可以执行其中的方法，保证执行顺序）

<script src="1.js" defer></script>

2.async下载脚本（异步下载，下载完成后即可执行，不保证执行顺序）

<script src="2.js" async></script>

对于defer与async的选择问题上，建议和浏览器当前加载 页面无关的脚本 使用 async，否则使用defer或者也可以放在html页面底部。

（注：页面无关的脚本为什么要加载，白痴么？No，对于浏览器而言，静态文件会被缓存在浏览器中，下次加载会直接从缓存读取，如果缓存没有才会请求网络。有人想知道js脚本下载不完整浏览器会加载么，答案是浏览器会等待js脚本缓存完后加载，不用担心只加载了一半）

同时使用defer和async,html5浏览器会忽略defer(IE10+支持async)

<script src="2.js" defer async></script>