方法一

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

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

方法二

虽然 css 的方式可以做到排除但是这并不是我们所预期的，我们需要 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=“nolazyload”,就大功告成了