图片懒加载的简单思路

1.懒加载的优点

提高前端性能，图片按需加载，减轻服务器的压力，提高页面的响应速度，减少带宽。

2.实现原理

图片的加载通过 src ，对 src 赋值时浏览器会请求图片，src = ' ' 时不会发生请求。

基于 html5 的 自定义 data-xxx 来实现，也就是 data-xxx 存放的图片的真实路径，需要加载图片的时候，再将 data-xxx 的值赋值给 src。

<img data-src = "图片的真实路径" src = " " />

3.实现

当然，向后台请求数据时，会进行分页处理的。

• 第一种方式： 引入jquery.lazyload.js

<script src = "./js/jquery.lazyload.js"></script>

<script>
    $(".img-group ul img").lazyload();
</script>

• 第二种方式：手写

$(function () {
    var pageNum = 1,
        pageSize = 10;
    // 作为初次的请求触发
    getData(pageNum);
    // 几个高度的问题
    $(window).scroll = function () {
        var scrollTop = Math.ceil($(this).scrollTop()); // 滚动高度，滚动条到顶距离 处理一下，必须整数
        var clientHeight = $(this).height; // 可视高度，固定值
        var totalHeight = $(document).height(); // document 当前页面的高度
        // 如果 滚动高度 + 可视高度 >= 页面高度 就说明滚动条到底了，需要请求下一页的数据
        if (scrollTop + clientHeight >= totalHeight) {
            getData(++pageNum); // 要先 ++
        }
    }
})
// 请求数据
function getData(pageNum) {
    $.ajax({
        type: 'get',
        url: `http://localhost:8080/getLists/${pageNum}/${pageSize}`,
        dataType: 'json',
        success: () => {
            $.each(res, (index, item) => {
                $(".img-group ul img").append(`随心所欲`)
            });
            $(".img-group ul img").lazyload();
        },
        error: () => {
            console.debug(error)
        }
    })
}

 

不要随波逐流，要找到自己的路。