butterfly控制特定图片懒加载

经常看我博客的同学应该不难发现我的文章顶图偶尔进来以后还要等一会才能出现，还有加载动画的图片偶尔加载不出来，后来经过我一系列的排查发现居然是懒加载的缘故。

观察 network 选项卡可以发现我们需要让启动器改变，不让lazyload.iife.min.js来加载我们的顶图与加载动画的头像。

方案一

可以使用 css 的background属性而不使用 img 标签，就可以做到启动器变成对应的 css，从此排除懒加载的影响。

1
2
3
4
.loading-img {
  background: url("") no-repeat center center;
  background-size: cover;
}

方案二（推荐）

虽然 css 的方式可以做到排除但是这并不是我们所预期的，部分情况为了 seo 我们需要 img 标签且如果有多个特定图片需要指定不太好写 css，于是就产生了方案二。

我们观察butterfly对懒加载的实现可以发现，在themes/butterfly/scripts/filters/post_lazyload.js中第11行左右的lazyload方法中替换了所有的img标签的src属性，所以我们可以通过修改正则表达式来匹配，以达到我们的目的

预期：给图片添加上 class 为nolazyload时不使用懒加载

代码修改themes/butterfly/scripts/filters/post_lazyload.js，将 lazyload 方法修改

1
2
3
4
5
6
7
8
9
function lazyload(htmlContent) {
  const bg = hexo.theme.config.lazyload.placeholder
    ? urlFor(hexo.theme.config.lazyload.placeholder)
    : "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
  return htmlContent.replace(
    /(<img(?!.*?class[\t]*=[\t]*['"].*?nolazyload.*?['"]).*? src=)/gi,
    `$1 "${bg}" data-lazy-src=`
  );
}

给对应的图片添加 class, 修改themes/butterfly/layout/includes/header/index.pug， 注意 ⚠️，butterfly 默认顶图是使用的 background 属性设置，为了 seo 我改为了 img 标签。

1
2
3
4
if top_img !== false
  if is_post()
    include ./post-info.pug
    img#post-top-bg(src=bg_img class='nolazyload')

大功告成！