Image flickering when using @cloudinary/react lazyload after adding alt text

Offen
  • Stimmt etwas nicht?
#234 20 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
38/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
frontend, performance

Rechercherichtung

Beginne damit, @cloudinary/react zu aktualisieren und das Problem im verlinkten CodeSandbox zu reproduzieren, insbesondere in src/Lazyloading.js um die Zeilen 33-40. Vergleiche das Laden mit Alt-Text und dem Lazyload-Plugin über mehrere Aktualisierungen hinweg; abgeschlossen ist es, wenn das Bild vor dem Laden nicht mehr kurz seinen Alt-Text anzeigt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
image

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

https://codesandbox.io/p/sandbox/lazy-loading-lqip-react-js-sdk-2-0-forked-c3hsk6?file=%2Fsrc%2FLazyloading.js%3A33%2C13-38%2C30

Vorherrschende Sprache
TypeScript
Sterne
49
Forks
17
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus cloudinary/frontend-frameworks

Alle Issues in cloudinary/frontend-frameworks

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.