Image flickering when using @cloudinary/react lazyload after adding alt text
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 38/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend, performance
調査の方向性
まず @cloudinary/react を更新し、リンク先の CodeSandbox で問題を再現します。特に src/Lazyloading.js の 33-40 行付近を確認してください。複数回更新しながら、alt テキストありの場合と lazyload プラグインを使った場合の読み込みを比較します。読み込み前に画像の alt テキストが一瞬表示されなくなれば完了です。
索引モデルが 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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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 件 ·
cloudinary/frontend-frameworks の issue をすべて見る
似ている issue
-
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 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
Yeraze/meshmonitor#6407 ·
メンテナーはふだん 1 日以内に返信
-
area: install-setup needs-info question
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 1 日以内に返信
-
area:docs documentation good first issue
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 12 日以内に返信