如何使用jquery显示页面加载百分比

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<div id="progress"></div>

$(document).ready(function() {
  var totalSize = $(document).find('html')[0].outerHTML.length; // 获取页面总大小
  var loadedSize = 0; // 已加载的大小

  $(document).ajaxStart(function() {
    // 在每个Ajax请求开始时，监听加载事件
    $(document).ajaxSend(function(event, xhr, options) {
      loadedSize += options.data.length; // 累加已加载的大小
      var percent = Math.round((loadedSize / totalSize) * 100); // 计算百分比
      $('#progress').text('页面加载进度：' + percent + '%'); // 更新显示百分比
    });
  });

  $(document).ajaxStop(function() {
    // 在所有Ajax请求完成时，隐藏进度条
    $('#progress').hide();
  });
});