JS+CSS实现图片预加载与背景图上中下切图

body:after {
    content: "";
    display: block;
    position: absolute;
    background:
    url("?image/manage/help/01.png") no-repeat -10000px -1000px,
    url("?image/manage/help/02.png") no-repeat -10000px -1000px,
    url("?image/manage/help/03.png") no-repeat -10000px -1000px,
    url("?image/manage/help/04.png") no-repeat -10000px -1000px,
    url("?image/manage/help/05.png") no-repeat -10000px -1000px,
    width: 0;
    height: 0
}

(function(){
    var imgSrcArr = [
        'image/1.png',
        'image/2.png',
        'image/3.png',
        'image/4.png',
        'image/5.png',
        'image/6.png',
        'image/7.png'
    ];
    var imgWrap = [];
    function preloadImg(arr) {
        for(var i =0; i< arr.length ;i++) {
            imgWrap[i] = new Image();
            imgWrap[i].src = arr[i];
        }
    }
    setTimeout(function(){preloadImg(imgSrcArr)},5000)
}());

.preload-img:after{
    content: "";
    display: block;
    position: absolute;
    background:
    url("?image/manage/help/01.png") no-repeat -10000px -1000px,
    url("?image/manage/help/02.png") no-repeat -10000px -1000px,
    url("?image/manage/help/03.png") no-repeat -10000px -1000px,
    url("?image/manage/help/04.png") no-repeat -10000px -1000px,
    url("?image/manage/help/05.png") no-repeat -10000px -1000px,
    width: 0;
    height: 0
}

/*
    比如我们写了上面的这样一个类，但是页面中没有用到，我们在文档加载完毕之后，给某个元素添加该类
*/
 $("#target").addClass("preload-img")

<section class="content-wrap">
     <div class="line-wrap">
     </div>
     <p>我是内容</p>
</section>

.content-wrap{
    position: relative;
    background:url('?images/top-bg.png') left top no-repeat,
    url('?images/bottom-bg.png') left bottom no-repeat;
    background-size:100% auto;
    .line-wrap{
        position: absolute;left:0;top:4.8rem;bottom:2.73rem;z-index:-1;
        width:100%;
        background:url('?images/middle-bg.png') left top repeat-y;
        background-size:100% auto;
    }
}