带有阻塞JavaScript的CSS Shimmer效果

.shimmer {
  background: linear-gradient(to right, #f6f7f8 4%, #edeef1 25%, #f6f7f8 36%);
  background-size: 800px 100%;
  position: relative;
  overflow: hidden;
  animation: shimmerAnimation 1.5s infinite linear;
}

@keyframes shimmerAnimation {
  0% {
    background-position: -800px 0;
  }
  100% {
    background-position: 800px 0;
  }
}

// 添加Shimmer效果
function addShimmerEffect() {
  const elements = document.getElementsByClassName('shimmer');
  for (let i = 0; i < elements.length; i++) {
    elements[i].classList.add('shimmer');
  }
}

// 移除Shimmer效果
function removeShimmerEffect() {
  const elements = document.getElementsByClassName('shimmer');
  for (let i = 0; i < elements.length; i++) {
    elements[i].classList.remove('shimmer');
  }
}

// 模拟加载延迟
setTimeout(removeShimmerEffect, 2000); // 假设2秒后加载完成，移除Shimmer效果