Skip to content

Conversation

@levy9527
Copy link
Contributor

Why

因为 lazyload 样式是固定写死的,导致 lazysizes 修改 classList、加载图片触发 load 事件后,vue 先执行回调(由文档可知lazysizes 默认有 125ms deplay),则 vue 发现 lazyload 不见了,于是重新渲染,把 lazyload class 添加回元素,这导致 lazysizes 再次发送图片请求。

How

  1. lazyload 样式放入 computed
  2. 监听 lazysizes 的事件,添加 loading 状态
  3. 修改类名,更符合 lazysizes 风格

Test

before:
image

after:
image

Docs

customize.md 修改

@auto-add-label auto-add-label bot added the bug Something isn't working label Dec 30, 2020
@netlify
Copy link

netlify bot commented Dec 30, 2020

Deploy preview for v-img ready!

Built with commit cfc18f2

https://deploy-preview-38--v-img.netlify.app

@netlify
Copy link

netlify bot commented Dec 30, 2020

Deploy preview for v-img ready!

Built with commit 327b221

https://deploy-preview-38--v-img.netlify.app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants