如何使用JavaScript获取HTML、CSS资源加载进度，为gravatar工具添加加载屏

核心实现逻辑 #

• 先统计所有需要加载的资源总数量（包含CSS、JS、HTML片段、头像资源等），每成功加载一个资源就更新进度值，进度百分比 = 已加载资源数 / 总资源数 * 100
• 避免使用document.write，该方法会清空当前页面已有的所有DOM内容，建议单独写加载屏的固定DOM节点来更新进度
• 如果是加载大体积单资源，可以通过fetch API的可读流监听字节加载进度，精度更高

完整可运行代码 #

HTML部分 #

<!-- 加载屏DOM 默认隐藏 -->
<div id="loading-screen" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; flex-direction: column; align-items: center; justify-content: center;">
  <p>请稍候，请求正在加载中</p>
  <p id="loading-percent">0%</p>
</div>

<input type="button" onClick="LoadProj()" value="加载资源">

JS部分 #

// 这里替换成你实际要加载的所有资源地址
const RESOURCE_LIST = [
  './style.css',
  './core.js',
  './result-template.html',
  'https://cdn.example.com/default-avatar.png'
]
const TOTAL_COUNT = RESOURCE_LIST.length
let loadedCount = 0

// 计算百分比函数
function percent() {
  return Math.round((loadedCount / TOTAL_COUNT) * 100)
}

// 单个资源加载函数
function loadResource(url) {
  return new Promise((resolve, reject) => {
    let element
    // 按资源类型创建对应DOM节点
    if (url.endsWith('.css')) {
      element = document.createElement('link')
      element.rel = 'stylesheet'
      element.href = url
    } else if (url.endsWith('.js')) {
      element = document.createElement('script')
      element.src = url
    } else if (url.endsWith('.html')) {
      // 加载HTML片段用fetch
      fetch(url)
        .then(res => res.text())
        .then(html => {
          // 此处可将加载完成的HTML片段存入全局变量或插入到对应DOM位置
          loadedCount++
          resolve(html)
        })
        .catch(reject)
      return
    } else {
      // 图片类资源
      element = new Image()
      element.src = url
    }

    element.onload = () => {
      loadedCount++
      resolve()
    }
    element.onerror = reject
    document.head.appendChild(element)
  })
}

async function LoadProj() {
  const loadingScreen = document.getElementById('loading-screen')
  const percentText = document.getElementById('loading-percent')
  loadingScreen.style.display = 'flex'
  percentText.textContent = '0%'

  // 并发加载所有资源
  const loadTasks = RESOURCE_LIST.map(url => {
    return loadResource(url).then(() => {
      // 每加载完一个更新进度
      percentText.textContent = `${percent()}%`
    })
  })

  // 等待所有资源加载完成
  await Promise.all(loadTasks)
  // 加载完成隐藏加载屏
  loadingScreen.style.display = 'none'
  // 此处编写加载完成后你的业务逻辑
}

如果需要更精细的字节级进度（比如加载单个大体积资源），可以用fetch的进度监听实现：

async function loadBigResource(url, onProgress) {
  const response = await fetch(url)
  const totalSize = response.headers.get('content-length')
  const reader = response.body.getReader()
  let loadedSize = 0

  while(true) {
    const {done, value} = await reader.read()
    if (done) break
    loadedSize += value.length
    onProgress(Math.round((loadedSize / totalSize) * 100))
  }
}

内容的提问来源于stack exchange，提问作者user16826598