如何在打开页面时垂直加载图像？

<img src="" alt="placeholder" id="image">

window.addEventListener('scroll', function() {
  // 获取图像元素
  var image = document.getElementById('image');
  // 获取图像元素距离页面顶部的距离
  var imageOffsetTop = image.offsetTop;
  // 获取页面滚动的距离
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 获取页面可视区域的高度
  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
  
  // 判断图像是否进入可视区域
  if (scrollTop + windowHeight > imageOffsetTop) {
    // 加载图像
    image.src = "path/to/image.jpg";
  }
});