原生js实现懒加载与下拉加载更多

最新推荐文章于 2024-06-20 21:13:23 发布

看到代码头都是大的

最新推荐文章于 2024-06-20 21:13:23 发布

阅读量1.6k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/ym5209999/article/details/104922699

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果图如下：

Alt

如果是你想要的效果，请继续往下阅读…

项目结构图如下：

项目结构
json数据如下：

在该json文件中，我只设计了图片的标题和图片的地址，标题在将鼠标移动到图片上，等待一会儿便会出现，图片地址使用的全部是网络图片。如有侵权，请联系本人，本人将以最快的速度删除（非商业）。

话不多说，直接上代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <link href="../css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="photo" id="photo">
    <img src="../image/loading.gif" class="lazyImg">
</div>

<script src="../js/index.js" type="text/javascript"></script>
</body>
</html>

在html文件中，该图片用于演示效果，为css做准备，后面将已经使用请求的数据将该图片覆盖，没有实际效果。

style.css

* {
    padding: 0;
    margin: 0;
}

.photo {
    width: 600px;
    margin: auto;
    text-align: center;
}

.photo .lazyImg {
    display: block;
    width: 200px;
    height: 200px;
    margin: 5px;
}

css中，只是将图片大小，图片的容器div大小等进行了简单的设计。

重点部分

index.js

var jsonData = []; // 定义空数组，接收获取的图片数组

//  获取json中的数据
function getJson() {
    var xhr = new XMLHttpRequest();
    xhr.open('get', '../json/photo.json');
    xhr.send(null);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var textSrc = '';
            jsonData = jsonData.concat(JSON.parse(xhr.responseText)); // 将获取到的字符串转换成数组格式
            for (var i = 0; i < jsonData.length; i++) {
                textSrc += '<img src="../image/loading.gif" title="' + jsonData[i].photoTitle + '" class="lazyImg" data-src="' + jsonData[i].photoSrc + '">'
            }
            document.getElementById('photo').innerHTML = textSrc;
            lazyLoad(photoList);// 调用懒加载方法
        }
    }
}

// 调用获取数据的方法
getJson();


//获取滚动条当前的位置
function getScrollTop() {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}


//获取当前可视范围的高度
function getClientHeight() {
    var clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
}

//获取文档完整的高度
function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

//获取元素距离顶部的位置
function getTop(e) {
    return e.offsetTop;
}

// 图片懒加载方法
function lazyLoad(imgs) {
    var viewHeight = getClientHeight();
    var scrollHeight = getScrollTop();
    var scrollTop = 0;
    for (var i = 0; i < photoList.length; i++) {
        scrollTop = getTop(imgs[i]);
        if ((viewHeight + scrollHeight) > scrollTop) {
            (function (i) {
                setTimeout(function () {
                    var temp = new Image();
                    temp.src = imgs[i].getAttribute('data-src');
                    imgs[i].setAttribute('src', temp.src);
                }, 300)
            })(i)
        }
    }

}

//滚动事件触发
var photoList = document.getElementsByClassName('photo')[0].children;

window.onscroll = function () {
    lazyLoad(photoList);
    /* 下拉加载更多 */
    if (getScrollTop() + getClientHeight() >= getScrollHeight() - 1) {
    // 减1是防止获取的像素为小数，无法出现相等的情况
        getJson();
    }
};

还有什么问题都可以一起讨论。

看到代码头都是大的

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
原生js实现懒加载与下拉加载更多

效果图如下：刚加载时：加载结束：如果是你想要的效果，请继续往下阅读......项目结构图如下：json数据如下：在该json文件中，我只设计了图片的标题和图片的地址，标题在将鼠标移动到图片上，等待一会儿便会出现，图片地址使用的全部是网络图片。如有侵权，请联系本人，本人将以最快的速度删除（非商业）。话不多说，直接上代码：index...
复制链接

扫一扫

专栏目录