index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>prloader js</title>
</head>
<body>
    check source code in developer tool.
    <script src="js/preloader.js"></script>
    <script>
        var cache; // to save loaded sources
        /**
         * preloader.js
         * 預載圖片資源
         */
        preloader({
            manifest : [
                {id: 'img_1', src: 'images/img1.png'}, // 圖片預設可省略 type: 'image' 
                {id: 'img_2', src: 'images/img2.png', crossOrigin: 'anonymous'}, // 跨網域資源支援 crossOrigin: 'anonymous'
                {id: 'img_3', type: 'image', src: 'images/img3.png'},
                {id: 'audio', type: 'audio', src: 'audio/ado.mp3'},
                {id: 'video', type: 'video', src: 'video/vdo.mp4'},
            ],
            onEachLoad: function(info) {
                console.log('讀取中(' + info.index + '/' + info.total + ')');
            },
            onAllLoad: function(source) {
                console.log('preload all completed');
                cache = source;
            }
        });
    </script>
</body>
</html>