LazyLoad.js图片懒加载示例
js 的懒加载 demo，用的是挺常见的 lazyload.js 插件，逻辑也比较清晰，适合想优化页面加载速度的你看看。整个思路就是图片不一下子全加载，等你滚动到哪张图，才去求它，适合图片多的场景，比如商品列表、图集页之类的。
html 里的图片一般不直接写src，而是用data-src存真实地址。插件监听滚动事件，图片进视口就把data-src换成src，浏览器立马就加载图片了。
插件也挺好集成的，一般一个lazyload.js加一段初始化脚本就搞定，代码量小，响应也快。你还可以配点fade-in的 css，图片加载更平滑，看着舒服。
项目结构比较简单：lazyload.js插件文件、几个测试图片、一个index.html演示文件，还有些 css 样式文件，拿来跑一下效果立马就能看到。新手也能快速上手。
如果你还在手动写滚动监听，建议直接试试这个插件，省事还好用。页面卡顿严重的项目，用上这个会改善不少。
文件大小：37.31KB
评论区