# Fade In Images as They Load

> Makes content images fade in smoothly when they finish loading instead of popping in, for a more polished feel.

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

## Code

```html
<style>
@media (prefers-reduced-motion: no-preference) {
    .wpide-fade{opacity:0;transition:opacity .5s ease;}
    .wpide-fade.is-loaded{opacity:1;}
}
</style>
<script>
(function () {
    document.querySelectorAll('.entry-content img, .wp-block-post-content img, .wp-block-image img').forEach(function (img) {
        if (img.complete && img.naturalWidth) { return; }
        img.classList.add('wpide-fade');
        var done = function () { img.classList.add('is-loaded'); };
        img.addEventListener('load', done, { once: true });
        img.addEventListener('error', done, { once: true });
    });
})();
</script>
```

## Notes

Respects the reduced-motion accessibility setting. Images that are already loaded are shown immediately.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Fade In Images as They 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/