tiny-loader.js/example.html at master · youzan/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
38
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <button class="js-click">点我</button>
        <script type="text/javascript" src="./loader.js"></script>
        <script type="text/javascript">
            // 页面初始化需要加载的静态资源
            var initLoadFiles = [
                '__tests__/vendor/assert.js',
                '__tests__/vendor/jquery.js'
            ];
            window.Loader.sync(initLoadFiles);

            // 当出现某种交互后，需要下载静态资源
            var nBtn = document.getElementsByClassName('js-click')[0];
            nBtn.addEventListener('click', function(e) {
                window.Loader.async([
                    'https://b.yzcdn.cn/v2/vendor/jquery-1.10.2.min.js',
                    'https://b.yzcdn.cn/v2/vendor/require.js',
                    'https://dn-growing.qbox.me/vds.js'
                ], function() {
                    alert('download finish');
                });
            });

            // 热点静态资源，或者之后页面需要的静态资源加载
            // 假设5s后页面已经全部加载完
            setTimeout(function() {
                window.Loader.async([
                    'https://b.yzcdn.cn/v2/build_css/stylesheets/intro/projects/new_intro_a01915dc00.css',
                    'https://b.yzcdn.cn/v2/vendor/jquery-1.10.2.min.js'
                ]);
            }, 5000);
        </script>
    </body>
</html>