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.
Opens WPIDE on
Code
<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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.