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

Ouverte
  • Quelque chose ne va pas ?
#234 20 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
38/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react, typescript
Domaine
frontend, performance

Piste de recherche

Commencez par mettre à jour @cloudinary/react et reproduire le problème dans le CodeSandbox lié, en particulier dans src/Lazyloading.js autour des lignes 33-40. Comparez le chargement avec un texte alternatif et avec le plugin lazyload lors de plusieurs actualisations ; c’est terminé lorsque l’image n’affiche plus brièvement son texte alternatif avant son chargement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
TypeScript
Étoiles
49
Forks
17
Aucune PR mergée en 30 j

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de cloudinary/frontend-frameworks

Toutes les issues de cloudinary/frontend-frameworks

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.