原生js实现图片滚动懒加载的demo源码

以下是一个简单的原生JS实现图片滚动懒加载的demo源码：

HTML：

<div id="container">
  <img src="placeholder.jpg" data-src="image1.jpg" alt="">
  <img src="placeholder.jpg" data-src="image2.jpg" alt="">
  <img src="placeholder.jpg" data-src="image3.jpg" alt="">
  <img src="placeholder.jpg" data-src="image4.jpg" alt="">
  <img src="placeholder.jpg" data-src="image5.jpg" alt="">
  <img src="placeholder.jpg" data-src="image6.jpg" alt="">
  <img src="placeholder.jpg" data-src="image7.jpg" alt="">
  <img src="placeholder.jpg" data-src="image8.jpg" alt="">
  <img src="placeholder.jpg" data-src="image9.jpg" alt="">
  <img src="placeholder.jpg" data-src="image10.jpg" alt="">
</div>

CSS：

#container {
  width: 600px;
  height: 400px;
  overflow-y: auto;
}

img {
  width: 100%;
  margin-bottom: 10px;
}

JS：

// 获取容器和所有图片
var container = document.getElementById('container');
var images = container.getElementsByTagName('img');

// 加载图片
function loadImg(img) {
  var imgSrc = img.getAttribute('data-src');
  img.src = imgSrc;
}

// 判断图片是否在可视区域内
function isInViewport(img) {
  var rect = img.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// 加载可视区域内的图片
function loadVisibleImages() {
  for (var i = 0; i < images.length; i++) {
    if (isInViewport(images[i])) {
      loadImg(images[i]);
    }
  }
}

// 初始化，加载可视区域内的图片
loadVisibleImages();

// 滚动时加载可视区域内的图片
container.addEventListener('scroll', function() {
  loadVisibleImages();
});

在上面的代码中，我们首先通过`document.getElementById`和`container.getElementsByTagName`获取到容器和所有的图片元素。然后，我们定义了两个函数：`loadImg`和`isInViewport`，分别用于加载图片和判断图片是否在可视区域内。`loadVisibleImages`函数用来加载可视区域内的图片，我们在初始化时先调用一次，然后在容器滚动时也会调用。最后，我们通过`container.addEventListener`给容器添加一个滚动事件监听器，以便在容器滚动时加载可视区域内的图片。