主页 / 问题 / 758150
Accepted
kittycat_13
Asked:2020-12-14 17:25:05 +0000 UTC2020-12-14 17:25:05 +0000 UTC

是否可以在没有 jQuery 的表上实现延迟加载？

  • 772

面对在没有 jQuery 帮助的情况下为表实现延迟加载的任务。谷歌没有帮助，我没有找到或多或少足够和合适的主题的例子。有没有其他人遇到过这个问题？我很乐意提供帮助。

在这里，我从服务器获取文章列表并将 json 响应解析为表： 

ArticleController.prototype.getAllArticles = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/posts', true);
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa("admin" + ":" + "admin"));
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            var items = JSON.parse(xhr.responseText);
            var output = '';
            for (var key in items) {
                output += '<tr>';
                output += '<td>' + items[key].id + '</td>';
                output += '<td>' + items[key].title + '</td>';
                output += '<td>' + items[key].content + '</td>';
                output += '<td>' + items[key].author + '</td>';
                output += '<td>' + items[key].creation_date + '</td>';
                output += '<td>' +
                    '<a href="#"><i class="material-icons">edit</i></a>' +
                    '<a href="#" class="col-lg-1"><i class="material-icons">delete</i></a>' +
                    '</td>';
                output += '</tr>'
            }
            document.getElementById('articles').innerHTML = output;
        };
    };
    xhr.send();
}
function ArticleController() {
    this.indexAction = function() {
        this.getAllArticles();
    };
};

var articles = new ArticleController();
articles.indexAction();

盘子是这样的：

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    能。为此，您需要解决几个问题。

    1. 将页面滚动到最底部的定义；
    2. 在服务器上创建一个特殊的方法来返回额外的行；
    3. 根据第 1 条中的事件执行来自客户端的异步请求以重新加载表；
    4. 在页面上渲染从服务器接收到的数据。

    1.确定将页面滚动到最底部（何时需要加载）

    为了确定页面已经滚动到最底部，您需要取两个值之间的差值：整个页面的高度（以像素为单位）和屏幕（或视口）相对于页面开头的偏移量 +此屏幕本身的高度。差异越小，页面滚动的越低，您需要越早开始加载其他行。

    2. 在服务器上创建一个特殊的方法，它将返回额外的行

    服务器方法应该从客户端接收关于已经加载了多少行或从哪一行开始的信息。这通常是这样完成的：

    /feed.php?offset=20&limit=20

    这意味着：从 20 号开始还给我 20 行。服务器应该以 JSON 的形式或已经呈现的形式做什么。取决于应用程序的实现。

    3. 从 p.1 事件的客户端执行异步请求重新加载表

    除了发送客户端所需的行数和偏移量信息外，您已经解决了这个任务。

    4.在页面上从服务器接收到的绘图数据

    你以同样的方式完成了它。

    • 2

相关问题