# Shimmer Placeholders While Images Load

> Shows a soft animated "skeleton" shimmer in the space of content images until each image has loaded, so pages feel faster and less jumpy on slow connections.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: images, loading, skeleton, performance
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-image-skeleton-loading/

## Code

```html
<style>
.wpide-skeleton{background:linear-gradient(100deg,#eceff1 30%,#f6f7f8 50%,#eceff1 70%);background-size:300% 100%;animation:wpide-shimmer 1.4s ease-in-out infinite;}
@keyframes wpide-shimmer{from{background-position:100% 0;}to{background-position:0 0;}}
@media (prefers-reduced-motion:reduce){.wpide-skeleton{animation:none;}}
</style>
<script>
(function () {
    var images = document.querySelectorAll('.entry-content img, .wp-block-post-content img, .wp-block-post-featured-image img, .post-thumbnail img');
    images.forEach(function (img) {
        if (img.complete && img.naturalWidth) { return; }
        img.classList.add('wpide-skeleton');
        var done = function () { img.classList.remove('wpide-skeleton'); };
        img.addEventListener('load', done, { once: true });
        img.addEventListener('error', done, { once: true });
    });
})();
</script>
```

## Notes

Applies to images in post content and featured images. The shimmer is static for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Shimmer Placeholders While Images Load" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/