图片加载致JS/CSS动画卡顿，预加载方案无效求助

我在制作实现图片多种展示效果的JS/CSS动画时遇到问题：通过按钮控制图片从display:none切换为display:block显示，首次点击按钮时图片出现前有轻微延迟，缓存后无延迟，但该首次延迟破坏了动画流畅度。

我已尝试多种图片预加载及优化方案，均未解决问题：

• 使用<link rel="preload" as="image" href="img-url.jpg" />进行资源预加载
• 编写JS预加载函数（示例代码已注释，可尝试启用）：

function preload_image(im_url) {
  let img = new Image();
  img.src = im_url;
}

preload_image("img-url.jpg");

• 给目标元素添加will-change:transform、will-change:display、will-change:opacity等属性
• 尝试将隐藏图片设为opacity:0，通过切换为opacity:1实现显示，该方案仅在Firefox中有效，Chrome仍存在延迟，且并非理想实现方式

以上方案在Chrome和Firefox中均未解决首次显示延迟问题，请问我哪里操作有误？是否需要采用图片先在屏幕外加载再显示的方案？

内容的提问来源于stack exchange，提问作者François Lacruche