如何处理用户手动滚动时的懒加载?

处理用户手动滚动时的懒加载通常涉及监听滚动事件，然后检查滚动位置是否接近或达到图片所在的可视区域。以下是在 Vue 或类似框架中的一个基本示例：

1. **绑定滚动事件**:
在 Vue 组件的 `mounted` 生命周期钩子或者 `methods` 中，注册一个滚动事件处理器，比如使用 Vue 的 `$refs` 来获取滚动元素：

   export default {
     mounted() {
       this.$refs.scrollElement.addEventListener('scroll', this.handleScroll);
     },
     methods: {
       handleScroll(e) {
         //...
       }
     },
     ...
   }

2. **计算可视区域**:
当接收到滚动事件时，计算当前可视区域的高度以及滚动条的位置，看是否有图片在这个范围内：

   handleScroll(e) {
     const scrollHeight = this.$refs.scrollElement.scrollHeight;
     const scrollTop = this.$refs.scrollElement.scrollTop;
     const clientHeight = this.$refs.scrollElement.clientHeight;

     // 图片容器高度加上当前滚动位置，如果超过屏幕顶部，则开始检查图片
     if (scrollTop + clientHeight >= scrollHeight - imageContainerHeight) {
       // 执行图片的懒加载操作
     }
   }

3. **懒加载图片**:
当满足条件时，遍历需要懒加载的图片元素，并调用它们的 `lazyLoad` 方法，或者更新它们的 `src` 属性。

4. **取消监听**:
如果有需要，在组件卸载时移除滚动事件监听器，以防止内存泄漏：

   beforeDestroy() {
     this.$refs.scrollElement.removeEventListener('scroll', this.handleScroll);
   }