如何在HTML页面间配置自定义Preloader？

嘿，很高兴看到你自己设计了这么酷的相机风格预加载器！作为新手能做到这一步已经很棒啦，我来帮你搞定它的显示逻辑，分几步来：

1. 先调整预加载器的结构和样式 #

首先咱们给预加载器加一个全屏容器，这样它能覆盖整个页面，不让用户看到加载中的内容。修改你的HTML和CSS：

调整后的CSS #

/* 预加载器容器：全屏覆盖，默认显示 */
#preloader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c0392b; /* 和你的红色背景一致 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 确保在所有内容上方 */
}

#camera-body, #reel-1, #reel-2 { 
  fill: #fff; 
  fill-opacity: 0.95; 
  stroke: none; 
} 

body { 
  height: 100vh; 
  color: rgba(255,255,255,0.95); 
  display: flex;
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  background-image: url( https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg); 
} 

span { 
  font-family: 'Open Sans', arial, sans-serif; 
  font-size: 1.2em; 
  font-weight: 700; 
  line-height: 2em; 
}

调整后的HTML #

把你的SVG放进预加载器容器里，还可以加个加载文字：

<!DOCTYPE html> 
<html> 
<title>preloader</title> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="shortcut icon" type="image/png" href="favicon/popcorn-32.png"> 
</head> 
<body>
<!-- 预加载器容器 -->
<div id="preloader-container">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org" id="camera-loader" width="85.708488" height="100"> 
  <defs id="defs12" /> 
  <path id="camera-body" d="M 51.5625 0 C 50.667739 -0.00962983 49.756943 0.05800477 48.84375 0.1875 C 41.018415 1.2971691 35.117198 7.3376842 33.8125 14.71875 C 30.504071 7.9918491 23.138091 3.8277945 15.3125 4.9375 C 5.573576 6.3185261 -1.1937811 15.321773 0.1875 25.0625 C 1.030765 31.00916 4.7245026 35.850708 9.6875 38.40625 L 10.59375 44.84375 L 41.21875 40.5 C 42.618434 40.301472 43.966737 41.101389 44.15625 42.4375 C 44.34576 43.773612 43.274684 44.957723 41.875 45.15625 L 11.25 49.5 L 12.40625 57.6875 C 12.593105 59.005185 13.837018 59.937079 15.15625 59.75 L 64.25 52.78125 C 65.567815 52.594377 66.499355 51.348937 66.3125 50.03125 L 63.5625 30.78125 C 67.618077 26.946961 69.843395 21.259142 69 15.3125 C 67.748216 6.4849658 60.211858 0.09304631 51.5625 0 z M 51.28125 3.75 C 58.168631 3.6506107 64.22589 8.6859174 65.21875 15.6875 C 66.295328 23.279482 61.029156 30.329715 53.4375 31.40625 C 45.84552 32.482829 38.795329 27.18573 37.71875 19.59375 C 36.641441 11.998855 41.938942 4.9828747 49.53125 3.90625 C 50.124347 3.8221462 50.697574 3.7584222 51.28125 3.75 z M 17.5625 8.53125 C 24.449868 8.4318561 30.507144 13.46718 31.5 20.46875 C 32.576577 28.060719 27.310389 35.110969 19.71875 36.1875 C 12.126783 37.264077 5.0765804 31.966969 4 24.375 C 2.9226914 16.780121 8.2202041 9.7641225 15.8125 8.6875 C 16.405598 8.603395 16.978824 8.5396714 17.5625 8.53125 z M 79.71875 27.46875 L 66.9375 33.65625 L 68.53125 44.8125 L 82.53125 47.21875 L 79.71875 27.46875 z M 41.71875 41.0625 C 41.582761 41.058251 41.422178 41.073761 41.28125 41.09375 L 8.15625 45.78125 L 7.90625 44.09375 L 2.78125 43.9375 L 4 52.53125 L 8.875 50.9375 L 8.625 49.25 L 41.78125 44.5625 C 42.908673 44.40259 43.699053 43.493996 43.5625 42.53125 C 43.443014 41.688847 42.670671 41.092246 41.71875 41.0625 z M 51.53125 57.21875 L 28.625 60.4375 C 28.625117 63.279515 28.625057 61.501735 28.625 64.34375 L 30.90625 64.34375 L 32.40625 64.34375 L 17.21875 97.46875 C 16.804629 98.371268 17.19123 99.429629 18.09375 99.84375 C 18.996268 100.25787 20.054629 99.87127 20.46875 98.96875 L 36.34375 64.34375 L 38.28125 64.34375 L 38.28125 98.21875 C 38.28125 99.211743 39.069507 100 40.0625 100 C 41.055493 100 41.875 99.211743 41.875 98.21875 L 41.875 64.34375 L 43.6875 64.34375 L 59.71875 98.96875 C 60.136118 99.869771 61.192729 100.26112 62.09375 99.84375 C 62.994771 99.426382 63.386118 98.338521 62.96875 97.4375 L 47.65625 64.34375 L 49.09375 64.34375 L 51.53125 64.34375 L 51.53125 57.21875 z " /> 
  <path id="reel-1" d="m 17.763265,10.60917 c -1.849868,0 -3.349902,1.500036 -3.349902,3.349902 0,1.849868 1.500034,3.34863 3.349902,3.34863 1.849865,0 3.348629,-1.498762 3.348629,-3.34863 0,-1.849866 -1.498764,-3.349902 -3.348629,-3.349902 z m -8.0539896,5.851215 c -1.849868,0 -3.3499023,1.500032 -3.3499023,3.349898 0,1.849866 1.5000343,3.349897 3.3499023,3.349897 1.8498656,0 3.3498996,-1.500031 3.3498996,-3.349897 0,-1.849866 -1.500034,-3.349898 -3.3498996,-3.349898 z m 16.1016246,0 c -1.849868,0 -3.3499,1.500032 -3.3499,3.349898 0,1.849866 1.500032,3.349897 3.3499,3.349897 1.849865,0 3.348629,-1.500031 3.348629,-3.349897 0,-1.849866 -1.498764,-3.349898 -3.348629,-3.349898 z m -13.023579,9.460259 c -1.849867,0 -3.3498994,1.500032 -3.3498994,3.349902 0,1.849865 1.5000324,3.348629 3.3498994,3.348629 1.849867,0 3.3499,-1.498764 3.3499,-3.348629 0,-1.84987 -1.500033,-3.349902 -3.3499,-3.349902 z m 9.950613,0 c -1.849866,0 -3.348629,1.500032 -3.348629," />
  <span>加载中...</span>
</div>

<!-- 页面内容 -->
<div id="page-content" style="display: none;">
  <!-- 这里放你原来的页面内容 -->
  <h1>欢迎来到我的网站！</h1>
</div>
</body> 
</html>

2. 首次加载时的显示逻辑 #

添加JavaScript代码，监听页面加载完成事件，然后隐藏预加载器，显示页面内容：

// 等待页面所有资源加载完成
window.addEventListener('load', function() {
  const preloader = document.getElementById('preloader-container');
  const pageContent = document.getElementById('page-content');
  
  // 可以加个淡出动画，体验更好
  preloader.style.opacity = '0';
  preloader.style.transition = 'opacity 0.5s ease';