几乎半个月以来的时间,一有空闲就会折腾自己的博客,肯定也不是为了写东西,纯粹是折腾七七八八的东西。从前段时间的「播客」,到后面的「Stuff」页面,还有后来一些零零碎碎的关于 JS 的小需求。外人看来,就很纯粹的是吃饱了没事干。

前两天因为想要在一个页面上面放很多的图片,但是由于用了 CDN 之后,觉得一个页面上面的图片太多实在太耗费流量了(虽然并没有人什么人会访问这个小站,更别说跑掉我的流量了),但是总还是觉得不好,所以理所应当地就想要优化。

当然,优化多图的页面其实因为没有多少七七八八的思路,既简单又现成的方案就是「Lazy Load」了。

关于「Lazy Load」的说明网络上一大堆,有些 JS 的代码甚至直接复制过来就可以用了,但是我还是遇到了一些小问题,其实也无伤大雅,但是也还是想起来就会觉得不舒服。

Ghost 这个博客系统用了两年了,虽然并没有写什么东西但是说实话自己还是很喜欢它的,因为它又简单又直观。从去年年末到现在各个方面都有很多的改进,特别是它的编辑器真的相当方便了,可以直接插入「图库」,链接自动生成带 metadata 的书签,YouTube 这些常用的链接可以直接生成 iframe 等等,总之可以说是让人越来越爱上……。

但是,随着时间的推移,个人折腾的需求就越来越高。三年前其实自己也是在折腾 Wordpress,最后因为其臃肿和复杂转而投向简约的 Ghost,三年后的今天却又因为 Ghost 的需求无法满足自己又回头看向了 Wordpress。

说回来我在 Ghost 上调用「Lazy Load」遇到的问题。Lazy Load 需要给 img 标签添加一个特殊的 src 属性存放内容的真实地址,然后通过 JS 检测到元素进入可视范围时将特殊 src 的地址赋值给 src,从而达到图片进入屏幕范围时才加载的效果。Ghost 的新编辑器现在传图非常方便,直接拖拽图片放进编辑器就可以了,但是这种方式默认就把图片的真实地址写入了 src,无法正常使用 JS 达到 Lazy Load 的效果了。Ghost 现在倒是可以直接插入和编写 HTML 模块的,我可以手动写入 html 代码来达到 Lazy Load,可是这样就太繁琐了,最崩溃的是代码内容稍微多一点的时候整个编辑器就会开始响应缓慢,可操作性很低。

考虑过去修改 Ghost 的源码,让上传的图片的真实地址默认写入特殊 src 里,但是稍微翻看了一下 Ghost 的文件后还是放弃了,似乎要修改的地方还挺多了,看的眼睛都花了,更别说改完之后能不能正常使用 Ghost 都不知道,索性作罢。


当下其实自己还没有太多想法,寻思着就算了,可能等等看看以后 Ghost 就默认支持 Lazy Load 的了,毕竟这个实现成本也不会很高,而且 Lazy Load 可以说基本没有什么缺点,对于开发团队来说也应该很简单一件事情……,总之,等呗。当时的确自己就是这么想的。

然后,我又逛到了很久没有看了的 罗磊的博客,当时我就震惊了,他的整个博客完全改版了,体量变得相当大了,而且整个风格都变了,一看就不是曾经 Ghost 可以做到效果(其实当初用 Ghost 也或多或少是因为罗磊的博客)。这个新的博客可以说是直击我心灵,因为完全就是我的理想型啊这!