JavaScript 如何做懒加载
打开一个图片很多的电商网站，你有没有过这样的体验：网速慢的时候，页面拉到一半才开始加载商品图，而不是一打开就拼命加载所有图？这种“需要的时候才加载”的功能，就是今天要聊的——JavaScript 懒加载。
很多人会把懒加载和“延迟加载”画等号，其实它的核心逻辑特别简单：只加载用户当前能看到的内容，等用户往下滑、内容出现在屏幕里了，才去加载剩下的。举个生活化的例子：你去超市买水果，不会把整筐草莓全搬回家，只拿你现在要吃的那盒，吃完再拿另一盒——懒加载就是网页的“按需取货”，能省资源、让页面打开更快。
为什么需要懒加载？先搞懂它的好处
直接用“不用懒加载”的场景对比，你就懂了。假设你做一个有100张高清产品图的网站，要是一打开就全加载，不仅手机流量哗哗跑，老旧的电脑可能还会卡半天。而懒加载就像给网页装了个“自动开关”：
- 省流量：用户只看前3张图，就只耗3张图的流量，对手机用户特别友好；
- 快加载：页面不用等所有资源，核心内容很快就能显示出来，不用让用户等；
- 减压力：服务器不用一下子接几百个资源请求，不会因为太多请求“忙不过来”。
用最基础的方法实现懒加载，不用复杂代码
不用记复杂术语，我们用图片场景举例子，分三步就能做，都是你能看懂的代码逻辑。
第一步：给图片换个“专属仓库”。平时我们用src属性直接放图片地址，现在把地址存到自定义属性里，比如data-src，这样浏览器不会一打开就加载。比如写成
第二步：监听用户的滚动动作。用JavaScript的scroll事件就能知道用户拉没拉页面，就像你盯着超市的传送带，看到商品快到跟前了就准备拿。
第三步：判断图片有没有“进视野”。这是最关键的一步——怎么知道图片出现在屏幕里了？我们可以用“元素的位置”和“滚动的距离”对比：如果图片的顶部，已经跑到屏幕底部的位置了，说明用户马上能看到它，这时候就把data-src里的地址，赋值给src属性，图片就自动加载了。
更简单的新方法：Intersection Observer API
刚才的基础方法要自己算位置，有点麻烦，现在浏览器有个现成的工具叫Intersection Observer，相当于超市给你配了个“提醒器”，不用你自己盯传送带，商品到跟前了它会主动喊你。
这个工具的用法特别省心：先创建一个观察者，告诉它“要盯哪些元素”，再设置好“到什么位置提醒”。比如要盯所有带lazy类的图片，只要写几行代码，浏览器会自动帮你判断元素有没有进视野，不用手动写滚动监听和位置计算，出错的概率也低。
实际用的时候，要避开这两个小坑
懒加载不是写了代码就万事大吉，有两个容易踩的坑要注意：
第一个是“空白占位”。要是图片没加载，页面会留一块空白，用户会以为内容没加载完，最好提前给图片加个浅灰色的占位图，或者加个小加载动画，让用户知道“这地方是要出内容的，等一下就有”。
第二个是“首屏内容别懒加载”。首屏就是用户打开页面第一眼能看到的内容，要是把首屏的图也做了懒加载，会导致用户刚打开页面，核心图还没加载，反而觉得慢。所以要把首屏的图直接写src，只给首屏以下的内容做懒加载。
现在你再打开一个图片多的网站，就知道它是怎么“按需加载”的了。小到电商的商品图，大到新闻网站的长图，懒加载都是提升用户体验的小妙招——用简单的代码，解决了大问题。