Image flickering when using @cloudinary/react lazyload after adding alt text
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 38/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
- 领域
- frontend, performance
调研方向
首先更新 @cloudinary/react，并在链接的 CodeSandbox 中复现该问题，尤其检查 src/Lazyloading.js 第 33-40 行附近的代码。多次刷新，比较带有替代文本和使用 lazyload 插件时的加载情况；当图片在加载前不再短暂显示其替代文本时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
New issue for cloudinary/frontend-frameworks
Before proceeding, please update to the latest version and test if the issue persists
For which package is this issue?
@cloudinary/react
Describe the issue in a sentence or two.
After adding alt text to an image and adding the lazyload plugin, an image flickering is happening very briefly, as it show the alt text before the image. You can see it here if you refresh the demo a few times: https://codesandbox.io/p/sandbox/lazy-loading-lqip-react-js-sdk-2-0-forked-c3hsk6?file=%2Fsrc%2FLazyloading.js%3A34%2C40
I've tried adding a placeholder too and the issue remains the same. using onError to add a default image as shown here doesn't seem to work as well.
Issue Type (Can be multiple)
[ ] Build - Can’t install or import the SDK
[X] Performance - Performance issues
[X] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)
Steps to reproduce
Just add an image with alt text and lazyload plugin and then refresh the page a few times and you be able to see it a few times before the image loads
<AdvancedImage
alt="This is the alt text"
key={i}
cldImg={cld.image(image)}
plugins={[lazyload()]}
></AdvancedImage>
Error screenshots
You can see the "This is the alt text" alt text very quickly before the image loads
Browsers (if issue relates to UI, else ignore)
[] Chrome
[] Firefox
[ ] Safari
[ ] Other (Specify)
[X] All
Versions and Libraries (fill in the version numbers)
package SDK version
Node - 18.15.0
NPM - 9.6.7
Config Files (Please paste the following files if possible)
"dependencies": {
"@cloudinary/react": "^1.13.0",
"@cloudinary/url-gen": "^1.19.0",
[...]
}
Repository
- 主要语言
- TypeScript
- 星标
- 49
- 派生
- 17
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
cloudinary/frontend-frameworks 的其他 Issue
-
AdvancedImage/AdvancedVideo crash: "Cannot read properties of undefined (reading 'htmlPluginState')" when unmounted before onMounted可能已有人在做 @strausr 于 138 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 68/100
cloudinary/frontend-frameworks#265 · 1 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 42/100
cloudinary/frontend-frameworks#253 · 5 条评论 ·
-
难度 4/5 3-5 天 新手友好度 30/100
cloudinary/frontend-frameworks#240 · 1 条评论 · 1 个 reaction ·
查看 cloudinary/frontend-frameworks 的全部 Issue
相似的 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 66/100
devswha/herdr-web-ui#3875 ·
-
难度 1/5 1 小时以内 新手友好度 88/100
-
area: runtime chore cli consistency dependencies developer-experience difficulty: easy discovery documentation enhancement good first issue help wanted hygiene json-output packaging priority: P3 tests version
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
discovery:other factory-active task-identify-harness-labels-done task-identify-issue-type-done
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复
-
flag: invalid template issue: bug severity: low source: cli status: pending reproduction version: 5
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 2 天内回复