无限滚动列表图片懒加载核心是按需加载，即仅在图片即将进入视口时才请求渲染；推荐使用intersection observer api监听容器是否相交，配合data-src与占位图实现高效加载，并动态注册新增节点，同时提供scroll降级方案及加载失败兜底、响应式适配等优化。

无限滚动列表中的图片懒加载，核心是“按需加载”——只在图片即将进入视口时才开始请求和渲染，避免一次性加载大量图片导致页面卡顿、流量浪费和首屏变慢。

监听滚动 + Intersection Observer 判断是否进入可视区

现代推荐方式是使用 Intersection Observer API，它比监听 scroll 事件更高效、无性能风险，且原生支持，无需依赖第三方库。

• 为每个图片的容器（如 <div class="img-wrapper">）设置一个空的 <code>data-src 属性，真实地址存在这里；<img> 标签初始用占位图或空白 src（如 src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="）
• 创建 Observer 实例，监听所有图片容器是否与视口相交（threshold 可设为 0.1 表示 10% 进入即触发）
• 回调中获取对应元素的 data-src，赋值给 img.src，并可移除监听（或解绑已加载项）以提升性能

配合无限滚动：动态注册新图片节点

当用户滚动到底部、触发下一页数据加载后，新插入的列表项里可能包含带 data-src 的图片。这时不能忽略它们——需要让 Observer 主动“观察”新增节点。


Pptx To Html
使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。
下载
• 每次 append 新列表项后，遍历其中所有待懒加载的 <img> 或其父容器，调用 observer.observe(el)
• 更稳妥做法：把懒加载逻辑封装成函数（如 initLazyLoad(imgEl)），在插入新 DOM 后统一调用
• 避免重复 observe 同一元素（可用 observer.takeRecords() 或维护已加载 Set 判断）

降级方案：scroll + getBoundingClientRect（兼容老浏览器）

若需支持 IE 或某些 WebView，可用传统方式，但要注意节流和计算开销：

• 监听 window.onscroll（建议用 requestAnimationFrame 节流）
• 遍历所有未加载的图片元素，调用 el.getBoundingClientRect()
• 判断 top 0（即部分在视口内）
• 满足条件则加载，并从待处理队列中移除该元素

额外优化点

让懒加载更健壮、用户体验更好：

• 加载失败兜底：监听 img.onerror，显示默认占位图或错误提示
• 加载中状态：用 CSS 类（如 .loading）配合过渡动画，提升感知速度
• 响应式适配：结合 srcset 和 sizes，让懒加载图片也适配不同屏幕宽度
• SEO 友好：服务端仍可输出完整 img 标签（含 src），前端 JS 加载时再覆盖，确保爬虫能抓取