懶載入的原因：

對於圖片過多的場景，為了提高頁面的載入速度，降低伺服器的負載，增強使用者體驗，我們對還沒出現在視野的圖片先不載入，當元素出現在我們視野中的時候再載入。

懶載入的原理：

我們先將img標籤中的src連結設定為一樣的圖片（空白圖片），將真正的圖片連結放在自定義屬性中，如（data-src），當js監聽到圖片元素進入到可視視窗的時候，將自定義屬性中的地址儲存到src中，達到懶載入的效果。

實現：

//判斷目標元素是否在可視視窗中
    function checkShow($img) {
        var scrollTop = $(window).scrollTop();//文件滾動上去的高度
        var windowTop = $(window).height();//網頁工作區域的高度
        var offsetTop = $img.offset().top;//元素距離文件頂端的偏移量
        if (offsetTop > scrollTop && offsetTop < (scrollTop + windowTop)) {
            return true;
        } else {
            return false;
        }
    }

    //判斷元素是否已被載入過
    function isLoaded($img) {
        return $img.attr('src') === $img.attr('data-src');
    }

    //載入元素
    function Loading($img) {
        $img.attr('src', $img.attr('data-src'));
    }

    //遍歷所有的圖片元素
    $('img').each(function () {
        //在頁面還沒滾動之前，判斷目標元素是否在可視區域內並且還沒被載入
        if (checkShow($(this)) && !isLoaded($(this))) {
            Loading($(this));
        }
        //監聽當滾動的時候，再次遍歷所有的元素，把目標元素載入在頁面上
        $(window).on('scroll', function () {
            $('img').each(function () {
                if (checkShow($(this)) && !isLoaded($(this))) {
                    Loading($(this));
                }
            })

        })
    })
 

預載入：提前載入圖片，當用戶需要檢視時可直接從本地快取中渲染

預載入會增加伺服器的壓力，可以說是犧牲伺服器前端效能，換取更好的使用者體驗，這樣可以使使用者的操作得到最快的反映。

預載入實現方式：

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+js進行圖片的預載入

.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('圖片的路徑');
    })