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

最新推荐文章于 2023-06-23 18:48:32 发布

转载最新推荐文章于 2023-06-23 18:48:32 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jasonzeng/p/4301614.html

文章标签：

#javascript #ViewUI

本文介绍了一种利用JavaScript实现网页资源预加载的方法，并通过动态更新加载进度来提升用户体验。文章详细展示了如何使用jQuery操作DOM元素，以及如何通过图片加载完成事件触发页面内容的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//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>