关于图片加载相关问题

[HCLonely]

懒加载问题

此插件懒加载可能与你主题的懒加载存在冲突，以下为几种解决方法：

1. 全站关闭懒加载，此插件启用/不启用懒加载均可正常运行；
2. 如果主题提供单独页面的懒加载配置参数，可在插件配置的extra_option中配置为关。
3. [建议]关闭此插件的懒加载，并按照主题的懒加载图片格式配置srcValue和lazyloadAttrName，例butterfly主题：

bangumi:
  enable: true
  ...
  lazyload: false
  srcValue: '__image__'
  ...

[mmdjiji]

具体原因好像是因为主题的懒加载会为图片套上一个 <a> 标签并且用第一次出现时的 <img> 里的链接（也就是loading）作为图片。等到懒加载触发 <img> 被替换成正确的图片时，不会去替换掉主题的 <a> 标签，从而导致打开图片时生成的 <img> 显示的还是loading。

[anzhiyu-c]

butterfly主题内开启懒加载，然后在插件内

bangumi:
  lazyload: true # 是否启用插件的懒加载
  extra_options:
    lazyload:
      enable: false # 关闭主题自带的懒加载(只关闭番剧页，不影响其他页面)

配置完以后会造成图片一直转圈圈

主题版本:4.3.1

hexo -v

hexo: 6.2.0
hexo-cli: 4.3.0
os: darwin 21.6.0 12.5.1

node: 16.16.0
v8: 9.4.146.24-node.21
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.7
openssl: 1.1.1q+quic
cldr: 40.0
icu: 70.1
tz: 2021a3
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

测试查看在线链接: https://anzhiyu-a.github.io/bangumis/

插件配置

bangumi: # 追番设置
  enable: true
  path:
  vmid: xxx
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: true
  extra_options:
    lazyload:
      enable: false
  loading:
  metaColor:
  color:
  webp:
  progress:

主题配置

# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true
  field: site # site/post
  placeholder:
  blur: false

[anzhiyu-c]

补充:开启主题的Lazyload并关闭hexo-bilibili-bangumi的Lazyload配置后会造成 加载到最后一页后继续点击下一页 图片会加载不出来，然后反复上下翻页，会有一点表现怪异
主题butterfly

主题配置

# Lazyload (图片懒加载)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true
  field: site # site/post
  placeholder:
  blur: false

插件配置

bangumi: # 追番设置
  enable: true
  source: bili
  path:
  vmid: xxxx
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: false
  loading:
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  proxy:
    host: '代理host'
    port: '代理端口'
  extra_options:
    lazyload:
      enable: false

测试查看在线链接: https://anzhiy.cn/bangumis/

[HCLonely]

butterfly主题内开启懒加载，然后在插件内

bangumi:
  lazyload: true # 是否启用插件的懒加载
  extra_options:
    lazyload:
      enable: false # 关闭主题自带的懒加载(只关闭番剧页，不影响其他页面)

配置完以后会造成图片一直转圈圈

主题版本:4.3.1

hexo -v

hexo: 6.2.0
hexo-cli: 4.3.0
os: darwin 21.6.0 12.5.1

node: 16.16.0
v8: 9.4.146.24-node.21
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.7
openssl: 1.1.1q+quic
cldr: 40.0
icu: 70.1
tz: 2021a3
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

测试查看在线链接: anzhiyu-a.github.io/bangumis

插件配置

bangumi: # 追番设置
  enable: true
  path:
  vmid: xxx
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: true
  extra_options:
    lazyload:
      enable: false
  loading:
  metaColor:
  color:
  webp:
  progress:

主题配置

# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload[](https://github.com/verlok/vanilla-lazyload)
lazyload:
  enable: true
  field: site # site/post
  placeholder:
  blur: false

butterfly主题目前使用此方法已无效

[anzhiyu-c]

butterfly主题目前使用此方法已无效

😣有其他的 办法解决这个问题吗，呜呜呜

[HCLonely]

不开懒加载或者改主题文件

[anzhiyu-c]

不开懒加载或者改主题文件

改主题文件是指的 修改 主题source/js/utils.js文件235行改为const dataSrc = i.dataset.lazySrc || i.getAttribute('data-src') || i.src
这个吗，我尝试修改以后依然会产生 翻到最后一页 继续翻页图片加载有问题的现象。

bangumi:
  lazyload: true # 是否启用插件的懒加载
  extra_options:
    lazyload:
      enable: false # 关闭主题自带的懒加载(只关闭番剧页，不影响其他页面)

主题的懒加载开着的
测试查看在线链接: https://anzhiy.cn/bangumis/

[HCLonely]

hexo-theme-butterfly/layout/includes/head/config.pug文件islazyload: !{theme.lazyload.enable},改成islazyload: !{page.lazyload ? (typeof page.lazyload.enable === 'boolean' ? page.lazyload.enable : theme.lazyload.enable) : theme.lazyload.enable},

[anzhiyu-c]

hexo-theme-butterfly/layout/includes/head/config.pug文件islazyload: !{theme.lazyload.enable},改成islazyload: !{page.lazyload ? (typeof page.lazyload.enable === 'boolean' ? page.lazyload.enable : theme.lazyload.enable) : theme.lazyload.enable},

貌似没有用 翻到最后一页 继续翻页图片加载有问题的现象还是存在😭。

[HCLonely]

hexo-theme-butterfly/layout/includes/head/config.pug文件islazyload: !{theme.lazyload.enable},改成islazyload: !{page.lazyload ? (typeof page.lazyload.enable === 'boolean' ? page.lazyload.enable : theme.lazyload.enable) : theme.lazyload.enable},

貌似没有用 翻到最后一页 继续翻页图片加载有问题的现象还是存在😭。

我这边测试的没问题

[anzhiyu-c]

我之前忘记开插件的懒加载了，这么改追番页确实没问题了，但是其他地方的图片全加载不出来了😭

[HCLonely]

我之前忘记开插件的懒加载了，这么改追番页确实没问题了，但是其他地方的图片全加载不出来了😭

那就没办法了