Hexo Icarus 懒加载BUG修复

修复 Hexo Icarus 主题 与 懒加载插件 hexo-lazyload-image 的 BUG。

背景

图片加载完毕后点击查看大图,仍然出现svg加载动画。

解决方式

\themes\\icarus\\source\\js\\main.js 文件中,函数最开始插入该代码

1
2
3
4
5
6
7
8
9
10
11
12
13
// 修复懒加载BUG
$(document).find('img[data-original]').each(function() {
const $img = $(this);
const originalSrc = $img.attr('data-original');
// 如果父元素是 <a>,则更新其 href
if ($img.parent('a').length) {
$img.parent('a').attr('href', originalSrc);
}
// 如果图片没有包裹在 <a> 里,则手动包裹
else {
$img.wrap('<a class="gallery-item" href="' + originalSrc + '"></a>');
}
});

修改后的效果

  1. 懒加载图片data-original)会被正确包裹在 <a> 标签中,并且 href 会被设置为 data-original 的值。
  2. 非懒加载图片 仍然按照原逻辑处理(src 作为 href)。
  3. lightgallery 能正确识别所有图片的真实 URL,不再显示 loading 状态。

参考

https://adaning.github.io/posts/42790.html