react首页图片很大加载很慢_一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。...

“ 今日继续分享，感谢大家一直一来的支持，你们的观看是我继续做下去的动力。”

1、图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

2、如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3、如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

4、如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

5、如果图片展示区域小于图片的真实大小，则应该在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致

预加载技术：

1.使用纯的css进行图片预加载

body:after {    content: "";    display: block;    position: absolute;    background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px;    width: 0;    height: 0}

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

 //存放图片路径的数组    var imgSrcArr = [        'imgsrc1',        'imgsrc2',        'imgsrc3',        'imgsrc4'    ];    var imgWrap = [];    function preloadImg(arr) {        for(var i =0; i< arr.length ;i++) {            imgWrap[i] = new Image();            imgWrap[i].src = arr[i];        }    }    preloadImg(imgSrcArr);    //或者延迟的文档加载完毕在加载图片    $(function () {        preloadImg(imgSrcArr);    })

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

$(function(){        $.get('图片的路径'); })

‍