js实现页面图片加载进度条

//html
<div id="loading" class="loading">
        <div class="load">
            <span id="loadingSpan"></span>
        </div>
</div>
<div id="content"><img src="content_01.jpg" /><img src="content_02.jpg" /><img src=="content_03.jpg" /><img src="content_04.jpg" /></div>
//js
<script type="text/javascript">
       var core = {
            //资源预加载
            loadResources: function() {
                var bodyHeight = $(window).height();
                $("#loading").height(bodyHeight);
                var imgPath = "images/";
                var sourceArr = [
                 ‘content_01.jpg‘,
                 ‘content_02.jpg‘,
                 ‘content_03.jpg‘,
                 ‘content_04.jpg‘,
                 ‘content_05.jpg‘
                ];
                for (var i = 0; i < sourceArr.length; i++) {
                    sourceArr[i] = (imgPath + sourceArr[i]);
                }
                var loadImage = function(path, callback) {
                    var img = new Image();
                    img.onload = function() {
                        img.onload = null;
                        callback(path);
                    }
                    img.src = path;
                }
                var imgLoader = function(imgs, callback) {
                    var len = imgs.length, i = 0;
                    while (imgs.length) {
                        loadImage(imgs.shift(), function(path) {
                            callback(path, ++i, len);
                        });
                    }
                }
                var bodyh = document.documentElement.clientHeight;

                imgLoader(sourceArr, function(path, curNum, total) {
                    var percent = curNum / total;
                    document.getElementById(‘loadingSpan‘).innerHTML = ‘资源加载中...‘ + Math.floor(percent * 100) + "%";
                    if (percent == 1) {
                        setTimeout(core.showPage, 300);
                    }
                });
            } (),
            //资源加载完毕，显示页面内容
            showPage: function() {
                $("#loading").remove();
                $("#content").show();
            }
        }
    </script>

转自：tx lol