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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。