当我使用 Chrome 精简模式切换深色模式时，我的背景图像不显示

Question

我在我的网站上遇到了这个问题，但只有在通过移动设备访问并首次访问时才会出现。页面加载后，我切换暗模式，但我的图像没有显示。但是，当我刷新页面时，图像显示正常。
这是我网站的 link：https://hannahneves.github.io
我这边的问题 (Android/Chrome)：https://youtu.be/3zESMLQuOWc
此外，该问题与 Chrome 精简模式有关。因为，当我停用精简模式时，网站运行正常。

我是这样切换黑暗模式的：

const html = document.querySelector('html');
const checkbox = document.querySelector('.switch');


let check;

(() => {

  check = localStorage.getItem('check');

  if(check) {
    html.classList.toggle('dark-mode');
  }

})();

checkbox.addEventListener('change', function(){

  check = html.classList.toggle('dark-mode');

  if(check == true) {
    localStorage.setItem('check', check);
  } else {
    localStorage.clear();
  }

});

图像是使用 CSS 上的变量上传的，如下所示：

:root {
--portfolio: url('/assets/LightMode/portfolio.svg');
}
.dark-mode:root {
--portfolio: url('/assets/DarkMode/portfolio.svg');
}

.portfolio-animation{
  background: var(--portfolio);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 267.5px;
  height: 182px;
  margin: 0 auto;
}

Answer 1

我没有找到针对此问题的具体解决方案，但我设法通过预加载图像解决了我的问题：Preloading CSS Images
谢谢大家的帮助和理解！

当我使用 Chrome 精简模式切换深色模式时，我的背景图像不显示

My background-image doesn't show when I toggle dark mode with Chrome Lite Mode

javascript

html

css

load

background-image