思考
关于图片懒加载的方法,基于Intersection Observer API实现起来很简单。
但是在Astro中实现起来却不同,因为这里要实现的不是网站上的图片懒加载,而是博客中图片的懒加载。
Astro中的博客是使用Markdown写的,在Frontmatter中添加layout
来指定渲染的组件,我们在打开博文的时候,组件已经加载。博文中的image标签都有了src属性,已经去发送请求获取数据了。
我一开始的想法是,在打开页面之后,图片发送请求之前,找到一个钩子函数,把image的src属性删除,存到data-src中。一个比window.onload
更早的钩子函数,但是没有这样的方法。
所以我就想在把markdown渲染成html的时候,把image标签进行处理。这个思路应该是可行的,我就去翻看Astro的文档,还真找到了配置方法markdown.remarkPlugins。
顺着官网的线索在github中找,我找到了这个包:remarkjs/remark,里面介绍了一段代码示例可以将h标签的层级缩小一级,即h2标签会变成h3标签。
原始md文档:
页面html为:
格式化后,页面html为:
从上面的示例中,我感觉到这个插件能够满足需求,于是开始动手实现。
实现
在astro.config.mjs
中添加如下代码:
在引入md的astro组件中,添加如下代码:
到这里,我们的图片懒加载就完成啦!