js图片预加载方式

为什么会存在预加载方式呢？首先，先抛出一个问题。当我们玩儿游戏时，为什么在点击开始或是在打开游戏界面时，总是会有个loading出现。这是在进行数据的加载。在开始，服务方便进行了某些数据的加载，为了使用户在使用时不会太因为网络不稳定的缘故而无法进行游戏的顺畅使用，优化了用户的体验。预加载的数据大多为游戏一开始时就使用到的数据，不会太巨大，所以，用户的等待时间也不会太久，相对于开始游戏的卡顿而言，相信用户更愿意等待加载时的几秒钟。
预加载的数据大多都是图片或音视频等，在此，和大家分享图片的预加载方式。其他不多说，代码附上。希望能够帮助到有需要的人。

<style>
.loadWrap {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 100px;
    text-align: center;
    -webkit-transform: translate3d(0px, -50%, 0)
}

.loadAniWrap {
    width: 66%;
    margin: 0 auto
}

.loadAni {
    position: relative;
    left: 0;
    -webkit-animation: wSteps5 1s steps(5) infinite;
    background:
        url(http://lianai-image-sys.imlianai.com/web/event/20151016tuodan/ani_load.png)
        ;
    background-size: auto 100%;
    width: 40px;
    height: 84px;
    margin-left: -20px
}

.loadBox {
    background:
        url(http://lianai-image-sys.imlianai.com/web/event/20151016tuodan/load_box.png)
        no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 14px;
    margin: 0 auto
}

.loadBox .loadBar {
    background:
        url(http://lianai-image-sys.imlianai.com/web/event/20151016tuodan/load_bar.png)
        no-repeat right top;
    background-size: cover;
    width: 0;
    height: 100%;
    border-left: 2px solid #000;
    border-radius: 7px
}

.loadWrap .loadPenc {
    font-size: 1.5rem;
    color: #3a200d;
    line-height: 3rem
}
</style>
<body>
<div class="loadWrap">
    <div class="loadAniWrap">
        <div class="loadAni"></div>
        <div class="loadBox">
            <div class="loadBar"></div>
        </div>
    </div>
    <p class="loadPenc">
        <span>0%</span>
    <p>
</div>
<script>
    var indexPics=['p1.png','p2.png','p3.png','p4.png','p5.png','p6.png','p7.png','p8.png','p9.png'];
    $(function() {
        var loadCanvas = {
            step : 0,
            animation_interval : 50,
            init : function() {
                var _this = this;
                _this.loadImg(indexPics, _this.callback);
            },
            callback : function() {
                //回调函数执行部分
            }
        },
        load_width : function(n, callback) {
            var _this = this;
            var varName;
            var animation = function() {
                var step = _this.step;
                if (step <= n) {
                    $(".loadAni").css("left", step + "%");
                    $(".loadBar").css("width", step + "%");
                    $(".loadPenc span").html(step + "%");
                    if (step >= 100) {
                        // loading加载完毕 ！
                        setTimeout(function() {
                            console.log("load end");
                            callback();
                        }, 300);
                    }
                    _this.step++;
                } else {
                    clearInterval(varName);
                }
            };
            clearInterval(_this.varName);
            _this.varName = setInterval(animation, _this.animation_interval);
        },
        loadImg : function(indexPics, callback) {
            var _this = this;
            var index = 0;
            var len = indexPics.length;
            var img = new Image();
            var flag = false;
            var load = function() {
                img.src = indexPics[index];
                img.onload = function() {
                    // 控制台显示加载图片信息
                    console.log('第' + index + '个img被预加载', img.src);
                    //Math.floor(((index + 1) / len) * 100) + "%"
                    var _w = Math.floor((index + 1) / len * 100);
                    _this.load_width(_w, callback);
                    index++;
                    if (index < len) {
                        load();
                    } else {
                        // callback();
                    }
                };
                return img;
            };
            if (len > 0) {
                load();
            } else {
                progress("100%");
            }
            return {
                indexPics : indexPics,
                load : load
            };
        }
        };
        loadCanvas.init();
    });
</script>
</body>

js图片预加载方式

猜你喜欢