懒加载和预加载的区别

概念：

懒加载：懒加载也叫延迟加载，JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

区别：

两者的行为是相反的，预加载是提前加载，懒加载是迟缓甚至不加载。

懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

意义：

懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

预加载：预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

实现方式：

懒加载：

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟。

2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

预加载：

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.使用CSS和JavaScript实现预加载。

.preload-img:after{
            content:"",
            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;
        }

/*
    好比咱们写了上面的这样一个类，可是页面中没有用到，咱们在文档加载完毕以后，给某个元素添加该类
*/

$(function(){
    $("#target").addClass("preload-img")
})

4.使用Ajax实现预加载。

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