Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

fix: repeated image request #38

Open
wants to merge 8 commits into
base: dev
Choose a base branch
from
Open

fix: repeated image request #38

wants to merge 8 commits into from

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.

1 participant