jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

为了在页面加载时添加加载中效果，我们可以使用jQuery Mobile提供的"loading"插件。该插件会在页面上显示一个加载中的图标动画，直到页面的所有资源（包括外部CSS和JavaScript文件）加载完成，然后再隐藏加载中的图标。在使用该插件时，需要注意jQuery Mobile的生命周期事件顺序。

jQuery Mobile的生命周期事件顺序是：

mobileinit: 页面加载前，可以通过该事件来自定义jQuery Mobile的配置选项。
pagebeforecreate: 用于在页面 DOM 创建之前初始化一些组件并进行操作。
pagecreate: 页面 DOM 创建完成后，可以在该事件中添加UI组件和绑定事件等操作。
pageinit: 页面组件都已经创建并初始化完毕后，该事件会被触发，可以在该事件中进行页面初始化操作。
pageload: 该事件已经从jQuery Mobile中移除，不再使用。
pagebeforehide: 当页面将要从DOM中移除之前，可以在该事件中进行一些操作和清理工作。
pageremove: 当页面已经从DOM中移除后，可以在该事件中进行一些操作和清理工作。

在使用"loading"插件时，我们需要在页面DOM创建之前显示加载中的图标，直到所有资源加载完成后再隐藏它。因此，我们需要在pagebeforecreate事件中添加显示加载中图标的代码，在pageload事件中添加隐藏加载中图标的代码。但JQuery Mobile 1.4以后不再支持pageload事件了，需要改用pageshow事件。可以使用以下示例代码来实现该功能：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Mobile加载中效果</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
  $(document).on("pagebeforecreate", function () {
    $.mobile.loading("show"); //显示加载中图标
  }).on("pageshow", function () {
    $.mobile.loading("hide"); //隐藏加载中图标
  });
  </script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>jQuery Mobile加载中效果</h1>
    </div>
    <div data-role="content">
      <!-- 页面内容 -->
    </div>
    <div data-role="footer" data-position="fixed">
      <h4>版权所有 &copy; 2021</h4>
    </div>
  </div>
</body>
</html>

在上面的示例代码中，我们在pagebeforecreate事件中调用$.mobile.loading("show")方法显示加载中的图标，在pageshow事件中调用$.mobile.loading("hide")方法隐藏加载中的图标。在示例代码中，我们使用了"fixed"属性将底部版权信息固定在底部。

除了在pagebeforecreate和pageshow事件中使用"loading"插件外，还可以在$(document).ready()和window.onload事件中使用它。但是，它们的执行顺序是不同的。

$(document).ready()事件表示文档的DOM（文档对象模型）已经加载完成，但是页面上的所有资源（包括外部CSS和JavaScript文件）还未加载完成。因此，如果在$(document).ready()事件中使用"loading"插件，只有文档的DOM加载完成后，在加载其他资源时才会显示加载中的图标。示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Mobile加载中效果</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
  $(document).ready(function () {
    $.mobile.loading("show"); //显示加载中图标
  });
  </script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>jQuery Mobile加载中效果</h1>
    </div>
    <div data-role="content">
      <!-- 页面内容 -->
    </div>
    <div data-role="footer" data-position="fixed">
      <h4>版权所有 &copy; 2021</h4>
    </div>
  </div>
</body>
</html>

另一方面，window.onload事件表示页面上的所有资源都已经加载完成，包括外部CSS和JavaScript文件，但是和$(document).ready()事件不同，它会等待所有页面资源都加载完成才会执行。因此，在window.onload事件中使用"loading"插件可以保证所有资源都加载完成后才显示加载中的图标。示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Mobile加载中效果</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
  window.onload = function () {
    $.mobile.loading("show"); //显示加载中图标
  }
  </script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>jQuery Mobile加载中效果</h1>
    </div>
    <div data-role="content">
      <!-- 页面内容 -->
    </div>
    <div data-role="footer" data-position="fixed">
      <h4>版权所有 &copy; 2021</h4>
    </div>
  </div>
</body>
</html>

可以看到，$(document).ready()会比window.onload事件更早执行，而且只会在DOM加载完成后执行。因此，如果使用$(document).ready()事件来显示"loading"插件，可能会出现显示不完整的问题。所以，在使用"loading"插件显示加载中的图标时，建议在pagebeforecreate事件中使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较 - Python技术站