页面滚动加载图像时的CSS绝对定位

<div class="image-container">
  <!-- 图像将被动态加载到这里 -->
</div>

.image-container {
  position: relative; /* 设置为相对定位，以便内部元素使用绝对定位 */
  width: 100%;
  height: 500px; /* 设置容器的高度，根据实际需求调整 */
  overflow: auto; /* 添加滚动条，当图像超出容器高度时可滚动 */
}

window.addEventListener('scroll', function() {
  var container = document.querySelector('.image-container');
  var containerTop = container.getBoundingClientRect().top;
  var windowHeight = window.innerHeight;

  if (containerTop < windowHeight) {
    // 当容器元素进入可视区域时，加载图像
    var image = document.createElement('img');
    image.src = 'image.jpg'; // 替换为实际图像的URL
    image.style.position = 'absolute';
    image.style.top = container.scrollHeight + 'px'; // 图像定位在容器底部
    container.appendChild(image);
  }
});