懒加载和预加载的基本原理和实现方法

懒加载的原因：

对于图片过多的场景，为了提高页面的加载速度，降低服务器的负载，增强用户体验，我们对还没出现在视野的图片先不加载，当元素出现在我们视野中的时候再加载。

懒加载的原理：

我们先将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('图片的路径');
    })

懒加载和预加载的基本原理和实现方法

猜你喜欢