web图片预加载的几种方式_浏览器端图片预加载-优快云博客

本文链接：https://blog.youkuaiyun.com/fouerror/article/details/80683766

本文探讨了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');