JS+CSS實(shí)現(xiàn)圖片預(yù)加載與背景圖上中下切圖

更新時(shí)間：2022年06月30日 11:13:12 作者：小旭2021

這篇文章介紹了JS+CSS實(shí)現(xiàn)圖片預(yù)加載與背景圖上中下切圖的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

圖片預(yù)加載

為什么使用圖片預(yù)加載

為什么會(huì)考慮使用圖片預(yù)加載呢？你是否曾有個(gè)網(wǎng)站，在那個(gè)網(wǎng)站你要滾動(dòng)你的導(dǎo)航然后有個(gè)延遲直到圖片被加載完……預(yù)加載將在這方面幫助你。

它將在頁面加載的時(shí)候加載那些圖片并將其存儲(chǔ)在瀏覽器的緩存里面。這樣當(dāng)用戶滾動(dòng)導(dǎo)航的時(shí)候，很漂亮而且流暢，沒有延遲。

下面整理常用的圖片預(yù)加載：

1.使用純的css進(jìn)行圖片預(yù)加載

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
}

2.使用純javascript進(jìn)行圖片預(yù)加載

(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)
}());

3.使用css+js方式進(jìn)行圖片預(yù)加載

css

.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
}

js

/*
    比如我們寫了上面的這樣一個(gè)類，但是頁面中沒有用到，我們?cè)谖臋n加載完畢之后，給某個(gè)元素添加該類
*/
 $("#target").addClass("preload-img")

背景圖上中下切圖方案

工作中經(jīng)常會(huì)遇到將背景圖切為三個(gè)部分：上部、中部、下部。

上部和下部：上部和下部使用容器的多背景圖實(shí)現(xiàn)。

中部：使用絕對(duì)定位容器的方式解決。

html部分：

<section class="content-wrap">
     <div class="line-wrap">
     </div>
     <p>我是內(nèi)容</p>
</section>

css部分：

.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;
    }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: