页面Loader提前完成加载，需同步页面加载状态的技术求助

你的问题核心是Loader的进度逻辑和页面实际资源加载状态脱节——当前Loader可能靠定时器模拟进度，提前跑完了100%，但页面主体资源还在后台加载，导致Loader一直卡着直到资源加载完成才消失。以下是具体解决思路和实现：

核心修复逻辑 #

不要用定时器直接拉满Loader进度，而是让Loader先停在接近完成的进度（比如90%），等页面所有资源完全加载后，再平滑完成最后10%的进度并隐藏Loader。

具体代码实现 #

// 获取Loader相关DOM元素
const loader = document.querySelector('.loader-container');
const progressBar = document.querySelector('.loader-progress');

// 初始化Loader进度到90%，保持等待状态
progressBar.style.width = '90%';
progressBar.style.transition = 'width 0.3s ease'; // 保持平滑过渡效果

// 监听页面所有资源（图片、脚本、样式等）加载完成事件
window.onload = function() {
  // 平滑推进到100%
  progressBar.style.width = '100%';
  // 进度完成后延迟隐藏Loader，提升视觉体验
  setTimeout(() => {
    loader.style.opacity = '0';
    loader.style.pointerEvents = 'none';
    // 完全隐藏后可以移除DOM（可选）
    setTimeout(() => loader.remove(), 300);
  }, 300);
};

额外优化建议 #

除了压缩图片，还可以通过这些方式进一步提升页面加载效率：

• 给非首屏图片添加懒加载（使用loading="lazy"属性），减少初始加载的资源量
• 对JS、CSS文件进行打包压缩，合并请求，减少HTTP请求次数
• 静态资源（图片、脚本、样式）使用CDN加速，缩短资源加载时间
• 按需加载非核心脚本，优先加载首屏所需资源

内容的提问来源于stack exchange，提问作者Abdul Rehman Butt