web图片预加载的几种方式

本文探讨了H5和动画中图片预加载的重要性,详细介绍了四种预加载方法:纯CSS预加载、纯JavaScript预加载、CSS结合JS预加载以及利用Ajax进行图片预加载,旨在提高用户体验,避免重复请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

类似H5和一些动画元素都需要提前加载完一些图片
如果图片在使用之前就已经请求过了,
那么再次使用的时候,就不会再去请求(ps:图片路径一样)。

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 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方式进行图片预加载

.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")

4.使用ajax方式进行图片预加载

 $.get('https://www.baidu.com/imgres.jpg');
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值