图片滚动加载示例（JavaScript懒加载）
图片多的页面，用上滚动加载真的省心不少。你不用一次性扔一堆图给浏览器，等用户滑到哪再加载哪，页面轻快，体验自然也更顺滑。这个 demo 的实现也挺实用的，用了Intersection Observer，不用手动监听滚动，浏览器自己帮你盯着，省事。
滚动时触发逻辑，判断图片是不是已经露出来了，露了就换成真正的图片地址。原来都是占位符，比如一张灰色图，加载时还能加点小动画，看着更舒服。像ScrollLoad.html里，估计这些都有体现，结构还挺清晰的，适合拿来参考。
细节上做得还蛮周到的，比如加了状态管理，防止重复加载。你用data-loaded属性记录一下图片是否加载过，逻辑清晰，效果也稳定。对 SEO 也考虑了，图片都加了alt，关键图还可以提前加载，搜索引擎更友好。
而且这个思路在响应式场景下也挺好用。你在移动端加载太多图，真心拖性能，有了懒加载，响应也快，省流量还不卡。建议你结合自己的业务场景调下阈值，比如快滚进来时就先加载一下，更自然。
如果你正好在搞图文密集型页面，比如商品列表、图库、社交流，都可以看看这个 demo。你可以点开ScrollLoad.html文件看看细节，拿去用或者做点改造都挺方便的。
文件大小：1.73KB
评论区