js loading加载

JavaScript文件的加载有两种方式：同步加载和异步加载。

同步加载会阻塞页面的渲染，直到文件加载完成才会继续执行下面的代码。在HTML中，可以使用`<script>`标签来同步加载JavaScript文件，如下所示：

<script src="path/to/script.js"></script>

异步加载不会阻塞页面的渲染，会在后台加载文件，同时继续执行下面的代码。在JavaScript中，可以使用`XMLHttpRequest`对象或`<script>`标签来异步加载JavaScript文件。其中，使用`<script>`标签异步加载JavaScript文件的方式为：

<script src="path/to/script.js" async></script>

注意，使用`async`属性来异步加载文件时，文件加载完成后会立即执行，不保证文件的加载顺序。如果需要保证文件的加载顺序，可以使用`defer`属性来异步加载文件，如下所示：

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>

以上代码会先异步加载`script1.js`文件，待`script1.js`文件加载完成后再异步加载`script2.js`文件，并在文件加载完成后按顺序执行。

相关问题

js呼叫打印时出现loading加载效果

您可以使用jQuery中的$.ajax()函数来实现这一点。首先，您需要设置 beforeSend 参数来在发出请求之前显示加载效果，如下所示：

$.ajax({
  url: 'example.php',
  beforeSend: function() {
    // 显示加载效果
  },
  success: function(data) {
    // 请求成功后执行的代码
  },
  error: function() {
    // 请求失败后执行的代码
  }
});

在 beforeSend 参数中，您可以使用 JavaScript 或 CSS 来显示加载效果，例如添加一个 loading 类来实现：

$.ajax({
  url: 'example.php',
  beforeSend: function() {
    $('body').addClass('loading');
  },
  success: function(data) {
    // 请求成功后执行的代码
    $('body').removeClass('loading');
  },
  error: function() {
    // 请求失败后执行的代码
    $('body').removeClass('loading');
  }
});

然后，您可以在 CSS 文件中添加以下代码来定义加载效果：

.loading::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  background-image: url(loading.gif);
  background-repeat: no-repeat;
  background-position: center;
}

其中，loading.gif是您的加载动画图片。通过这种方式，当您发起 ajax 请求时，页面就会显示一个 loading 效果，直到请求完成后才消失。

JQ loading 加载插件

JQ loading 是一个jQuery插件，用于实现页面异步加载时的loading效果。使用该插件可以让用户在等待页面内容加载的同时看到一个loading动画，提高用户体验。

使用步骤如下：

1. 在页面中引入jQuery库和JQ loading插件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jq-loading/2.0.0/jqLoading.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jq-loading/2.0.0/jqLoading.min.css">

2. 在需要使用loading效果的地方，调用JQ loading插件的方法：

$('#loading-container').jqLoading({
    text: "Loading...", // loading文字
    spinnerSize: 40, // loading图标大小
    spinnerColor: "#333", // loading图标颜色
    overlayColor: "rgba(255, 255, 255, 0.6)", // loading遮罩颜色
    overlayOpacity: 1, // loading遮罩透明度
    fontColor: "#333", // loading文字颜色
    fontStyle: "normal", // loading文字样式
    fontSize: "16px", // loading文字大小
    backgroundColor: "transparent" // loading背景色
});

其中，`#loading-container`是loading的容器元素，可以是任意元素，例如一个`div`。可以根据需要设置loading的样式、文字等参数。

3. 在异步加载完成后，隐藏loading效果：

$('#loading-container').jqLoading('destroy');

这样就可以实现简单的页面loading效果了。