懒加载实现问题：图片全部加载完成后才同时显示，无法逐个显示如何修复

• 第一个版本的代码中，images[i].onload = showmeup(images[i])属于立即执行函数，代码运行到这一行的时候就直接调用了showmeup给图片加动画属性，并不是把函数绑定到onload事件上，相当于你没有等图片加载完成就触发了显示逻辑，只是动画被后面的阻塞操作卡到所有资源加载完才一起执行。
• 第二个版本的while循环是同步阻塞逻辑，JS是单线程运行，这个死循环会一直占用线程，阻塞所有UI渲染和事件回调，直到所有图片加载完成、循环退出后，之前攒的所有DOM更新才会一次性执行，所以看起来是所有图片同时显示。

首先先在站点的CSS样式表中加入基础样式，默认隐藏未加载的图片：

#postbody img {
  opacity: 0;
  animation: showmeup 0.6s ease forwards;
}
@keyframes showmeup {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

然后替换原来的JS代码，依然放在<?php the_content();?>之后即可：

const div = document.getElementById("postbody");
const images = div.getElementsByTagName("img");

function showmeup(obg) {
  // 避免重复触发
  if (obg.dataset.loaded) return;
  obg.dataset.loaded = '1';
  obg.style.animationName = "showmeup";
}

Array.from(images).forEach(img => {
  // 已经加载完成的缓存图片直接触发显示
  if (img.complete && img.naturalHeight !== 0) {
    showmeup(img);
    return;
  }
  // 未加载完成的图片绑定load事件，加载完自动触发显示
  img.onload = () => showmeup(img);
  // 加载失败的图片也做降级处理，避免一直隐藏
  img.onerror = () => showmeup(img);
});

该方案不会阻塞主线程，每张图片加载完成后会立即触发自己的显示动画，完全实现逐个加载逐个显示的效果，也兼容已缓存的图片场景。

内容的提问来源于stack exchange，提问作者iamatotalynewuser