js怎么做无限加载

在JavaScript中实现无限加载可以通过以下步骤进行：

1.创建一个包含内容的容器，用于显示加载的数据。

2.设置一个加载标志，用于判断是否正在加载数据。

3.监听滚动事件，当滚动到页面底部时触发加载数据的函数。

4.在加载数据的函数中，首先将加载标志设置为true，防止重复加载。然后通过AJAX请求获取数据，并在成功返回数据后将数据添加到容器中。

5.在数据加载完成后，将加载标志设置为false，允许再次触发加载数据的函数。

下面是一个简单的示例代码：

// HTML
<div id="container"></div>

// CSS
#container {
  height: 500px;
  overflow-y: scroll;
}

// JavaScript
var container = document.getElementById('container');
var isLoading = false;

function loadData() {
  if (!isLoading) {
    isLoading = true;

    // 发送AJAX请求获取数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.php', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 数据加载成功，将数据添加到容器中
        container.innerHTML += xhr.responseText;
      }

      isLoading = false;
    };
    xhr.send();
  }
}

// 监听滚动事件
container.addEventListener('scroll', function() {
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    loadData();
  }
});

// 页面加载完成后首次加载数据
window.onload = function() {
  loadData();
};

注意，上述代码仅为示例，实际应用中可能需要根据具体需求进行修改