h5 loading 实现

实现H5页面加载动画的方法

使用CSS动画实现简单加载效果 通过CSS的@keyframes和animation属性可以创建平滑的加载动画。例如创建一个旋转的圆圈：

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

使用SVG实现复杂加载动画 SVG的路径动画和变形能力适合制作高级加载效果。示例代码：

<svg class="spinner" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#3498db" stroke-width="4"/>
</svg>

配合CSS动画：

.spinner circle {
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes dash {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -35; }
  100% { stroke-dashoffset: -124; }
}

使用JavaScript控制加载进度 动态加载进度条的实现：

const progressBar = document.getElementById('progress-bar');
let progress = 0;
const interval = setInterval(() => {
  progress += 5;
  progressBar.style.width = `${progress}%`;
  if(progress >= 100) clearInterval(interval);
}, 300);

对应的HTML结构：

<div class="progress-container">
  <div id="progress-bar" class="progress-bar"></div>
</div>

骨架屏技术优化体验 在内容加载前显示页面结构轮廓：

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

HTML示例：

<div class="skeleton" style="width:100%; height:100px;"></div>

使用第三方库快速实现 推荐使用Spin.js或Lottie等专业动画库：

// 使用Spin.js
const opts = {
  lines: 12,
  length: 30,
  width: 10,
  radius: 40,
  color: '#333'
};
const spinner = new Spinner(opts).spin(document.getElementById('loader'));

性能优化建议

• 限制动画的复杂度，避免过多使用CSS阴影和渐变
• 使用will-change属性提示浏览器优化动画性能
• 考虑使用硬件加速的CSS属性如transform和opacity
• 对于移动端，适当降低动画帧数以节省电量