Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

关于图片加载相关问题 #134

Open
HCLonely opened this issue May 5, 2022 · 12 comments
Open

关于图片加载相关问题 #134

HCLonely opened this issue May 5, 2022 · 12 comments

Comments

@HCLonely
Copy link
Owner

HCLonely commented May 5, 2022 •
edited
Loading

懒加载问题

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

  1. 全站关闭懒加载，此插件启用/不启用懒加载均可正常运行；
  2. 如果主题提供单独页面的懒加载配置参数，可在插件配置的extra_option中配置为关。
  3. [建议]关闭此插件的懒加载，并按照主题的懒加载图片格式配置srcValue和lazyloadAttrName，例butterfly主题：
bangumi:
  enable: true
  ...
  lazyload: false
  srcValue: '__image__'
  ...
@HCLonely HCLonely added wontfix This will not be worked on compatibility Some styles are not compatible with some themes labels May 5, 2022
@HCLonely HCLonely pinned this issue May 5, 2022
This was referenced May 5, 2022
Closed
Closed
@mmdjiji
Copy link
Contributor

mmdjiji commented Jul 7, 2022 •
edited
Loading

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

@anzhiyu-c
Copy link

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
Copy link

anzhiyu-c commented Aug 20, 2022 •
edited
Loading

补充:开启主题的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
Copy link
Owner Author

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
Copy link

anzhiyu-c commented Aug 20, 2022 •
edited
Loading

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

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

@HCLonely
Copy link
Owner Author

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

@anzhiyu-c
Copy link

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

改主题文件是指的 修改 主题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
Copy link
Owner Author

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
Copy link

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
Copy link
Owner Author

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
Copy link

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

@HCLonely
Copy link
Owner Author

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

那就没办法了

@mmdjiji mmdjiji mentioned this issue Aug 24, 2022
Closed
HCLonely added a commit that referenced this issue Oct 21, 2022
@HCLonely
修复BUG(#134, #182)
d590a45
@HCLonely HCLonely removed wontfix This will not be worked on compatibility Some styles are not compatible with some themes labels Oct 21, 2022
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mmdjiji @HCLonely @anzhiyu-c