hloth/blog.hloth.dev
1
0
Fork 0
Code Issues 6 Pull requests Activity

LQIPs are visible under transparent images when visiting the website with JS disabled #9

New issue
Open
opened 2025-10-23 22:07:12 +02:00 by hloth · 0 comments
hloth commented 2025-10-23 22:07:12 +02:00
Owner
Copy link

Unfortunately web doesn't have any :loaded CSS selector for img or any other way to hide LQIP after image is loaded without JS. So it's either:

  1. Show LQIP when JS is enabled (a very short period of time after HTML is loaded, JS is executed, but images are still loading)
  2. Show LQIPs by default but hide when an image is loaded, using JS (users with JS disabled will see LQIPs under images with transparent regions)
Unfortunately web doesn't have any :loaded CSS selector for img or any other way to hide LQIP after image is loaded without JS. So it's either: 1. Show LQIP when JS is enabled (a very short period of time after HTML is loaded, JS is executed, but images are still loading) 2. Show LQIPs by default but hide when an image is loaded, using JS (users with JS disabled will see LQIPs under images with transparent regions)
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
svelte5.39-sveltekit-2.43-2025
react18-nextjs14-2024
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: hloth/blog.hloth.dev#9
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?