如何使用 vanilla JavaScript 在主页和其他页面上显示加载器？

Question

我正在尝试使用 JavaScript 在我的网站上实现一个页面加载器。我希望加载器在主页上显示 3 秒然后消失，而在所有其他页面上，我希望加载器在页面加载完成后立即隐藏。我尝试了几种方法，包括 jQuery 和 PHP，但它们似乎都不适合我。

if (window.location.pathname == '/') {
  // Display the home preloader
  document.getElementById('home-preloader').style.display = 'block';
  // Hide the home preloader after 3 seconds
  setTimeout(function() {
    document.getElementById('home-preloader').style.display = 'none';
  }, 3000);
} else {
  // Display the page preloader
  document.getElementById('page-preloader').style.display = 'block';
  // Wait for the page to finish loading
  window.addEventListener('load', function() {
    // Hide the page preloader
    document.getElementById('page-preloader').style.display = 'none';
  });
}

.preloader {
  display: flex;
  justify - content: center;
  align - items: center;
  position: fixed;
  z - index: 999999;
  top: 0;
  left: 0;
  width: 100 %;
  height: 100 %;
  background - color: #ffffff;
  opacity: 1;
  transition: opacity 0.5 s ease - in -out;
}

.preloader img {
  display: block;
  max - width: 100 %;
  max - height: 100 %;
}

#home-preloader {
  background - color: #ffffff;
}

#page-preloader {
  background - color: #ffffff;
}

<div id="home-preloader">
    <!-- Preloader for other pages -->

    <img src="gif2" alt="Page Loading...">
</div>

<div id="page-preloader">
    <!-- Preloader for home main page -->

    <img src="gif1" alt="Home Loading...">
</div>

我也尝试过使用 jQuery 和 PHP，但它们似乎都不起作用。任何人都可以提出解决方案或替代方法来达到预期的结果吗？