> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/image-loading-placeholder.md).
# x-img-loading-placeholder
Shows a placeholder element until a neighbouring image finishes loading, then hides it.
Shows a placeholder element until a neighbouring image finishes loading, then hides it.
| Directive | What it does |
| -------------------------------------------- | --------------------------------------------------------------------------- |
| `x-img-loading-placeholder` | Shows the element until the sibling `![]()
` finishes loading, then hides it |
| `x-img-loading-placeholder="$refs.original"` | Points at a specific image instead of a sibling |
With no expression, the target is the next or the previous element sibling, whichever is an `![]()
`. Without any target the placeholder hides itself, and a target that already loaded hides it on the next tick. The directive sets `aria-hidden="true"` and `role="presentation"`, so assistive technology ignores the placeholder.
## Examples
### A basic placeholder
Use a tiny copy of the image as a sibling of the real one, layered underneath it:
```html
```
Keep the placeholder's z-index below the real image, so a visitor whose JavaScript never loads still sees the real image cover it.
### Pointing at a specific image
Use an expression when the placeholder is not a direct sibling:
```html
```
## Customizing
In the theme, render placeholders through the `image-loading-placeholder` snippet. It renders a 2px-wide copy of the image through `core-image` with a backdrop blur on top, and takes `auto_show: false` when you want to control visibility yourself.
