懒加载解决什么问题
页面里图片多，浏览器会同时发起大量请求，既拖慢首屏渲染，也浪费流量。lazyload.js 的思路很直接：图片的真实地址先不写进 src，而是放在 data-src 等自定义属性里，等图片接近视口时再替换成 src，触发加载。
这带来两个收益：首屏只加载可见区域的图片；用户不往下滚，后面的图片就不产生请求。
基本用法
引入脚本后，页面中的图片按约定书写：
随后调用初始化：
new LazyLoad({
elements_selector: “.lazy”
});
早期版本还要求给图片设置占位图或固定宽高，否则图片未加载时高度为 0，容器会塌陷，导致滚动位置判断失准。建议始终为图片写 width/height，或用 CSS 设置 aspect-ratio。
如果希望不支持 JavaScript 时也能看到图片，可以用 包裹一份真实的
关键配置项
elements_selector：要监听的元素选择器，默认是img。threshold：提前加载的像素距离，设大一些可减少滚动时的空白感。rootMargin：观察区域的扩展边距，适合配合固定头部或底部导航。data_src：真实地址所在的属性名，默认data-src，与后端模板约定一致即可。callbackload/callbackerror：加载成功或失败后的回调，可用于埋点或降级。
配置项名称在不同大版本间有变化，升级前务必对照对应版本的文档，不要混用旧写法。
两种实现方式
lazyload.js 早期依赖滚动事件与元素位置计算，兼容性好，但滚动时回调频繁，长列表下可能带来额外开销。较新版本优先使用 IntersectionObserver，由浏览器判断元素是否进入视口，性能更好，代码也更简洁。
代价是兼容性：IntersectionObserver 在较老的浏览器中不可用，需要 polyfill 或退回滚动监听方案。如果项目仍需支持老环境，选版本时要确认其降级策略。
常见问题排查
图片一直不加载。 先检查 elementsselector 是否真的匹配到元素，再看真实地址属性名是否与 datasrc 配置一致。类名拼错、属性写成 data-original 却未配置，都是高频原因。
首屏图片闪烁。 通常是占位图与真实图尺寸不一致，或未预留高度。给容器固定比例，并让占位图与真实图同尺寸，可明显改善。
滚动容器内失效。 图片不在 window 滚动流里时，需要把容器设为观察根节点，或确认所用版本是否支持自定义容器。很多“懒加载不生效”的问题，根源是页面实际滚动的是某个 overflow: auto 的 div。
与无限滚动冲突。 动态插入的图片需要重新初始化或调用更新方法，否则新节点不会被监听。
小结
lazyload.js 的价值在于用很小的接入成本换到首屏性能提升。用好它的前提是三件事：给图片预留尺寸、保持属性名与配置一致、确认滚动容器与浏览器兼容性。做到这三点，大部分踩坑都能提前避开。
