在Astro中实现图片懒加载
内容提要
本文讨论了在Astro中实现博客图片懒加载的方法。通过使用Intersection Observer API和自定义Remark插件，作者处理Markdown中的图片标签，使其在页面加载时不立即请求图片。具体实现包括在Astro配置中添加插件代码，并在组件中使用JavaScript监听图片的可见性，从而实现懒加载效果。
延伸解读
为何Astro博客图片懒加载更棘手
在普通网站中，图片懒加载通常通过监听img标签的可见性来实现。但Astro博客的图片由Markdown渲染，页面加载时img标签已带有src属性，浏览器会立即发起请求。作者指出，在页面加载前删除src的钩子函数并不存在，因此需要从Markdown渲染阶段入手，而非仅依赖前端脚本。
Remark插件：从源头移除图片请求
作者利用Astro的markdown.remarkPlugins配置，编写自定义Remark插件。插件遍历Markdown语法树，遇到image节点时，将url属性暂存到alt，并清空url。这样生成的HTML中img标签没有src，浏览器不会提前加载图片。注意需设置extendDefaultPlugins: true，否则Markdown可能无法正常转换为HTML。
前端脚本：用Intersection Observer恢复加载
在Astro组件中，通过JavaScript查询.markdown-body下的所有img标签，使用Intersection Observer监听其可见性。当图片进入视口时，从alt属性读取原始URL并设置回src，同时停止观察该图片。这种方法实现了按需加载，但依赖alt属性存储URL，可能影响图片alt文本的语义。
Q&A
如何在Astro中实现图片懒加载？
在Astro中实现图片懒加载需要使用自定义Remark插件和Intersection Observer API，处理Markdown中的image标签以延迟加载图片。
为什么Astro中的图片懒加载与普通网站不同？
因为Astro博客中的图片使用Markdown编写，image标签在页面加载时已经有src属性，导致图片请求提前发送。
在Astro中如何处理Markdown的image标签？
可以通过在markdown.remarkPlugins中添加自定义插件代码，处理image标签，将url属性转移到alt属性并清空url。
Intersection Observer API在懒加载中如何使用？
使用Intersection Observer API监听图片的可见性，当图片进入视口时，设置其src属性以实现懒加载效果。
在Astro配置中如何添加自定义插件代码？
在astro.config.mjs文件中，添加自定义插件代码到markdown.remarkPlugins数组中，并确保extendDefaultPlugins为true。
实现图片懒加载后有什么效果？
实现图片懒加载后，页面加载时不会立即请求所有图片，只有当图片进入视口时才会加载，从而提高页面性能。
