-
Couldn't load subscription status.
- Fork 393
LazyImage on Safari #5626
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
LazyImage on Safari #5626
Conversation
…d improve media caching strategy
🎭 Playwright Test Results✅ All tests passed! ⏰ Completed at: 09/17/2025, 08:01:00 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
|
What is the relation to Safari? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For some reason, the image load event was buggy there.
Had to rely on something else but it worked on safari finally
Safari doesn't trigger load event in images like other chrome based browsers |
This pull request improves the lazy loading behavior and caching
strategy for images in the `LazyImage.vue` component. The most
significant changes are focused on optimizing image rendering and
resource management, as well as improving code clarity.
**Lazy loading behavior improvements:**
* Changed the `<img>` element to render only when `cachedSrc` is
available, ensuring that images are not displayed before they are ready.
* Updated watchers in `LazyImage.vue` to use clearer variable names
(`shouldLoadVal` instead of `shouldLoad`) for better readability and
maintainability.
[[1]](diffhunk://#diff-3a1bfa7eb8cb26b04bea73f7b4b4e3c01e9d20a7eba6c3738fb47f96da1a7c95L80-R81)
[[2]](diffhunk://#diff-3a1bfa7eb8cb26b04bea73f7b4b4e3c01e9d20a7eba6c3738fb47f96da1a7c95L96-R96)
**Caching strategy enhancement:**
* Modified the `fetch` call in `mediaCacheService.ts` to use `{ cache:
'force-cache' }`, which leverages the browser's cache more aggressively
when loading media, potentially improving performance and reducing
network requests.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5626-LazyImage-on-Safari-2716d73d365081eeb1d3c2a96be4d408)
by [Unito](https://www.unito.io)
This pull request improves the lazy loading behavior and caching strategy for images in the
LazyImage.vuecomponent. The most significant changes are focused on optimizing image rendering and resource management, as well as improving code clarity.Lazy loading behavior improvements:
<img>element to render only whencachedSrcis available, ensuring that images are not displayed before they are ready.LazyImage.vueto use clearer variable names (shouldLoadValinstead ofshouldLoad) for better readability and maintainability. [1] [2]Caching strategy enhancement:
fetchcall inmediaCacheService.tsto use{ cache: 'force-cache' }, which leverages the browser's cache more aggressively when loading media, potentially improving performance and reducing network requests.┆Issue is synchronized with this Notion page by Unito