位置：首页-资讯-前端开发

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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

图片预加载

为什么使用图片预加载

为什么会考虑使用图片预加载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方面帮助你。

它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂亮而且流畅，没有延迟。

下面整理常用的图片预加载：

1.使用纯的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
}

2.使用纯javascript进行图片预加载

(function(){
    var imgclass="lazy" data-srcArr = [
        '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].class="lazy" data-src = arr[i];
        }
    }
    setTimeout(function(){preloadImg(imgclass="lazy" data-srcArr)},5000)
}());

3.使用css+js方式进行图片预加载

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
}


 $("#target").addClass("preload-img")

背景图上中下切图方案

工作中经常会遇到将背景图切为三个部分：上部、中部、下部。

上部和下部：上部和下部使用容器的多背景图实现。

中部：使用绝对定位容器的方式解决。

html部分：

<section class="content-wrap">
     <div class="line-wrap">
     </div>
     <p>我是内容</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;
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉