tiny-loader.js/example.html at master · heshen/tiny-loader.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
	<head></head>
	<body>
		<button class="js-click">点我</button>
		<script type="text/javascript" src="./loader.js"></script>
		<script type="text/javascript">
			// 页面初始化需要加载的静态资源
			var initLoadFiles = [
				// 'a.js',
				// 'b.js'
			];
			window.Loader.sync(initLoadFiles);

			// 当出现某种交互后，需要下载静态资源
			var nBtn = document.getElementsByClassName('js-click')[0];
			nBtn.addEventListener('click', function(e){
				window.Loader.async([
					// 'a.css',
					// 'b.js',
					// 'c.js'
				], function(){
					alert('download finish');
				});
			});

			// 热点静态资源，或者之后页面需要的静态资源加载
			// 假设5s后页面已经全部加载完
			setTimeout(function(){
				window.Loader.async([
					// 'a.js',
					// 'b.js',
					// 'c.css'
				]);
			}, 5000);
		</script>
	</body>
</html>