懶加載和預加載的基本原理和實作方法

懶加載的原因：

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

懶加載的原理：

我們先将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('圖檔的路徑');
    })