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.
Opens WPIDE on
Code
<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 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.