jq在页面加载赋值完成前先出现加载loading
时间: 2024-04-18 09:30:17 浏览: 19
您好！如果您想在页面加载完成前使用jQuery显示加载loading，您可以使用以下代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>Loading Example</title>
<style>
.loading {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f1f1f1;
z-index: 9999;
}
.loading::before {
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #888;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var loading = $('<div class="loading"></div>');
$('body').append(loading);
// 模拟加载数据的延迟
setTimeout(function() {
var data = '<h1>这是加载完成的内容</h1>';
$('#content').html(data);
loading.remove();
}, 2000);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
```
在上面的示例中，我们通过jQuery在DOM准备就绪时创建一个加载loading的元素，并将其添加到页面的body中。然后，通过setTimeout函数模拟了一个2秒钟的延迟，在延迟结束后，加载完成的内容被赋值给了id为"content"的元素，并移除了加载loading。
请注意，上述示例中的jQuery库是通过CDN引入的，您也可以将其下载到本地并修改相应的引入路径。
希望对您有所帮助！如果您有任何其他问题，请随时提问。
相关推荐
最新推荐
jQuery使用DataTable实现删除数据后重新加载功能
利用jQuery Datatable和artTemplate组合来做的表格。但是当删除数据时，需要重新加载table里的数据。接下来通过本文给大家分享jQuery使用DataTable实现删除数据后重新加载功能，需要的朋友参考下
jQuery实现动态给table赋值的方法示例
主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
jQuery页面加载初始化的3种方法(推荐)
jQuery 页面加载初始化的方法有3种 ，页面在加载的时候都会执行脚本，应该没什么区别，主要看习惯吧，本人觉得第二种方法最好，比较简洁。 第一种： $(document).ready(function(){ alert("第一种方法。")...
jQuery使用元素属性attr赋值详解
代码如下: 1.$(“Element”).attr(name) ‘取得第一个匹配的属性值，比如$(“img”).attr(“src”) 2.$(“Element”.attr(key,value)”) ‘某一个元素设置属性 3.$(“Element”.attr({key:value,key1:value,….}...
JQ8400语音模块使用说明书V1.2.docx
1.JQ8400-FL语音模块，带3W功放，有4M的存储空间，可通过USB拷贝声音文件，通过单片机串口控制 2.听说可以一线串口通信，我没试过，也不知道行不行，我才用的是二线串口通信 3.说明书来的，自己摸索哈
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
云原生架构与soa架构区别？
云原生架构和SOA架构是两种不同的架构模式，主要有以下区别：
1. 设计理念不同：
云原生架构的设计理念是“设计为云”，注重应用程序的可移植性、可伸缩性、弹性和高可用性等特点。而SOA架构的设计理念是“面向服务”，注重实现业务逻辑的解耦和复用，提高系统的灵活性和可维护性。
2. 技术实现不同：
云原生架构的实现技术包括Docker、Kubernetes、Service Mesh等，注重容器化、自动化、微服务等技术。而SOA架构的实现技术包括Web Services、消息队列等，注重服务化、异步通信等技术。
3. 应用场景不同：
云原生架构适用于云计算环境下的应用场景，如容器化部署、微服务
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。