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