一、什么是Bootstrap Loading？
Bootstrap Loading是基于Bootstrap框架下的一款插件，通过实现预加载动画来提高网站加载速度。该插件可以替代默认的浏览器加载符号，用户在等待加载时能够看到一个动态的、吸引人的预加载界面。Bootstrap Loading是一个轻量级的jQuery加载等待插件，主要用于前端开发中异步加载请求完成之前的页面加载过渡效果，提升网站体验和用户感知。
二、Bootstrap Loading的优点
Bootstrap Loading的出现，打破了默认加载符号的单调和不足。下面是这种插件的优势： 1. 提高用户体验。 2. 能够吸引用户的视线，缩短用户等待时间的感觉，加速页面加载速度。 3. 具有多样的加载类型和风格，满足不同网站的需求。 4. 好用、易懂、可以快速上手，大大降低页面开发的难度和成本。三、Bootstrap Loading的使用
Bootstrap Loading的使用，分为三个部分：引用插件、HTML结构、JavaScript调用。请看下面的代码： 引用插件：<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- <script src="js/jquery.min.js"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- <script src="js/bootstrap.min.js"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- 加载插件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-loading/2.0.0/bootstrap-loading.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-loading/2.0.0/bootstrap-loading.min.js"></script>HTML结构：
<button type="button" id="btn-loading">点击加载</button>
<!-- 加载中动画 -->
<div id="loading-container"
class="bootstrap-loading-container">
<div
class="bootstrap-loading-animation"></div>
</div>
JavaScript调用：
$(function () {
$('#btn-loading').click(function () {
if ($('#loading-container').css('display') == 'none') {
$('#loading-container').show();
} else {
$('#loading-container').hide();
}
});
});
四、Bootstrap Loading的使用实例
下面将展示一个基于Bootstrap Loading的实例：点击按钮，展示一个相应的预加载图标。 示例代码：<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Loading示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-loading/2.0.0/bootstrap-loading.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button type="button"
id="btn-loading"
class="btn btn-primary">
点击进行预加载
</button>
<div id="loading-container"
class="bootstrap-loading-container">
<div
class="bootstrap-loading-animation"
style="position: fixed;left: 50%;top: 50%;margin: -32px 0 0 -32px;">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-loading/2.0.0/bootstrap-loading.min.js"></script>
<script>
$(function () {
$('#btn-loading').click(function () {
if ($('#loading-container').css('display') == 'none') {
$('#loading-container').show();
} else {
$('#loading-container').hide();
}
});
});
</script>
</body>
</html>
