Preload card normal images for the feedback area - #118
Merged
Merged
Conversation
this is so we can later preload the card's normal images
it wasn't working for some reason. load/error events weren't firing from the component. one day i'll figure out why.
crookedneighbor
approved these changes
Sep 27, 2025
crookedneighbor
left a comment
Collaborator
There was a problem hiding this comment.
Do we need test files for the new util files?
| v-for="imageUri in getCardImages(card)" | ||
| :key="imageUri.normal" | ||
| alt="" | ||
| class="vh preload" |
Collaborator
There was a problem hiding this comment.
The vh class is usually used to hide the element, but make it accessible to screenreaders. Should the preload class just include the necessary stuff to hide the image so we're not using the vh class for multiple things?
Collaborator
Author
There was a problem hiding this comment.
vh also just makes it visually hidden, which is the behaviour we need. The preload class would just be duplicating it. It's already marked not for screen readers via alt="".
Co-authored-by: Blade Barringer <blade@crookedneighbor.com>
Co-authored-by: Blade Barringer <blade@crookedneighbor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Currently the feedback area can have a noticeable period during which its height flickers becauase the Normal image needs to load in.
I'm addressing this in two ways:
This may just result in a brief flicker of the card image changing over, rather than a lengthy delay.
I also made these changes:
getCardImages(), which extracts all theimage_urisobjects from a card. This is because we now need to do this complex process in more than one location.pickRandomItem(). It's only done in one location, but it helps describe what's actually happening in the code.imageUricomputed property to use those two things.I tried to add a little
PreloadImageelement to make preloading slightly more straightforward (and make it obvious that's what is happening) but for some reason, its:loadevent never emits. Maybe I did something obviously wrong that I completely missed. I added it in 7474537 during which it was immediately experiencing this error, and deleted it in 04d5e83.