JS中三种实现懒加载的方法！

1.根据滚动条高度显示图片

可以使用如下代码来实现：

HTML部分：

JS部分：

window.addEventListener('scroll', function() {
  var imageContainer = document.getElementById('image-container');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > 200) {
    imageContainer.style.display = 'block';
  } else {
    imageContainer.style.display = 'none';
  }
});

上述代码监听了浏览器窗口的滚动事件，并根据滚动条的高度来控制图片是否显示。当滚动条的高度大于200时，显示图片，否则隐藏图片。可以根据实际需求自行调整滚动条高度的阈值和图片容器的id。

2.根据定时器来实现懒加载图片

懒加载可以通过定时器来实现，具体实现步骤如下：

1. 获取需要懒加载的元素，可以使用querySelectorAll等方法。

2. 使用IntersectionObserver API监听元素是否出现在可视区域内，如果出现则加载内容。如果浏览器不支持IntersectionObserver，则可以通过定时器来模拟实现。

3. 创建一个定时器，在定时器的回调函数中，判断需要懒加载的元素是否出现在可视区域内，如果是，则加载内容，否则继续等待下一次定时器回调。

下面是一个使用定时器实现懒加载的例子：

// 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('img.lazyload');

// 定义一个函数，用来判断元素是否在可视区域内
function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// 定义一个定时器，每100ms检查一次需要懒加载的图片是否在可视区域内
const timer = setInterval(() => {
  images.forEach(img => {
    if (isInViewport(img)) {
      // 加载图片
      img.src = img.dataset.src;
      // 从需要懒加载的列表中移除该元素
      images.delete(img);
    }
  });
  
  // 如果所有图片都已经加载完毕，则取消定时器
  if (images.length === 0) {
    clearInterval(timer);
  }
}, 100);

在上面的例子中，我们首先获取所有需要懒加载的图片元素，然后定义了一个isInViewport函数，用来判断元素是否在可视区域内。

接着我们创建了一个定时器，每100ms检查一次需要懒加载的图片是否在可视区域内。如果图片在可视区域内，则加载该图片，然后从需要懒加载的元素列表中移除该图片。如果所有图片都已经加载完毕，则取消定时器。

需要注意的是，该方法只是一种简单的实现方式，实际应用中还需要考虑各种情况，比如多次触发定时器可能会增加浏览器负担，需要根据具体情况来进行调优。

3.实现滑到屏幕底部进行懒加载

可以通过以下步骤实现滑到屏幕底部进行懒加载：

1. 创建一个包含要懒加载的元素的列表或集合。
2. 监听窗口的滚动事件。
3. 在滚动事件处理程序中，检查滚动位置是否达到了屏幕底部。
4. 如果是，则加载下一批元素。
5. 每次加载元素时，更新列表或集合中的元素，以保持追加元素的顺序。

以下是一个简单的实现：

// Step 1: 创建包含要懒加载的元素列表
const lazyElements = Array.from(document.querySelectorAll('.lazy'));

// Step 2: 监听滚动事件
window.addEventListener('scroll', () => {
  // Step 3: 检查是否滚动到屏幕底部
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // Step 4: 加载下一批元素
    const nextBatch = lazyElements.splice(0, 10); // 加载10个元素
    nextBatch.forEach(element => {
      element.src = element.dataset.src; // 设置元素的src属性，触发下载
      element.classList.remove('lazy'); // 删除.lazy类，避免重复加载
    });
  }
});

在这个示例中，我们使用了一个lazy类来标记要懒加载的元素，并将要加载的元素数量设置为10。可以根据需要进行更改。另外，我们假设每个懒加载元素都有一个data-src属性，其中保存了实际要加载的图像的URL。