jquery实现html页面先加载内容过几秒后显示数据
前言
要在HTML页面中实现一个加载转动的效果，我们可以使用jQuery库来简化操作。以下是一个示例代码以展示如何使用jQuery实现一个基本的加载旋转动画：
一、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.loader {
border: 8px solid #f3f3f3; /* 白色边框 */
border-top: 8px solid #3498db; /* 蓝色顶部边框 */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite; /* 使用旋转动画 */
}
@keyframes spin {
0% { transform: rotate(0deg); } /* 初始角度为0度 */
100% { transform: rotate(360deg); } /* 最终角度为360度 */
}
</style>
</head>
<body>
<div id="loading" style="display: none;">
<div class="loader"></div>
</div>
<div id = "div_One" style="visibility: hidden;width: 300px;height: 300px;border:1px solid red;">
<h1>半杯可可</h1>
</div>
</body>
<script>
$(document).ready(function() {
// 在页面加载完成后显示加载动画
$("#loading").show();
// 模拟延迟操作（这里使用setTimeout函数）
setTimeout(function() {
// 完成加载后隐藏加载动画
$("#loading").hide();
//显示内容
$("#div_One").css('visibility','visible') ;
// 这里可以添加其他内容或执行其他操作
}, 3000);
});
</script>
</html>在上述代码中，我们使用了CSS样式创建了一个加载旋转动画。通过设置定位和居中样式，将加载动画放置在页面的中心位置。然后，在页面加载完成后使用jQuery的 $(document).ready(function()函数来显示加载动画。之后，可以通过setTimeout函数模拟延迟操作，并在操作完成后隐藏加载动画。你可以根据需要调整延迟时间和添加其他内容或操作。
二、解读一下
🚀第一步我们创建html页面添加相应的标签和元素
直接看代码
<div id="loading" style="display: none;">
<div class="loader"></div>
</div>
<div id = "div_One" style="visibility: hidden;width: 300px;height: 300px;border:1px solid red;">
<h1>半杯可可</h1>
</div>👉这里div内联样式了一个关键的Css属性：visibility
CSS的visibility属性用于控制元素的可见性。它有两个常用的取值：
- visible：元素可见。这是默认值。
- hidden：元素隐藏，但仍会占据布局空间。
和Css属性display属性的区别
与display属性不同，当元素的visibility设置为hidden时，该元素仍然存在于文档流中，并且会占据页面的布局空间。只是在渲染时不会显示出来。
需要注意的是，通过修改visibility属性来隐藏元素并不能阻止JavaScript等脚本对其进行操作或事件对其产生影响。如果需要完全隐藏元素，可以结合使用visibility和display属性，将display设置为none，这样元素就既不可见，也不占据布局空间了。
🚀第二步我们要使用CSS样式创建了一个加载旋转动画
直接看css代码
#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.loader {
border: 8px solid #f3f3f3; /* 白色边框 */
border-top: 8px solid #3498db; /* 蓝色顶部边框 */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite; /* 使用旋转动画 */
}
@keyframes spin {
0% { transform: rotate(0deg); } /* 初始角度为0度 */
100% { transform: rotate(360deg); } /* 最终角度为360度 */
}👉这里用到了关键字：@keyframes 关键贴 和animation 动画
CSS中的关键帧（Keyframe）是用于创建CSS动画的重要概念。关键帧允许您指定在动画过程中元素应该具有的样式。
通过使用@keyframes规则，可以定义一个或多个关键帧，并在其中指定元素应该在不同时间点上的样式。每个关键帧都表示动画过程中的一个特定时间点。
CSS动画（CSS animation）是一种通过在指定的时间内逐渐改变元素的样式来创建动画效果的技术。它可以为网页和应用程序添加生动、吸引人的交互效果，提升用户体验。
注意
@keyframes定义了名为spin的关键帧动画。然后，通过将animation设置为spin，并设置为2s，将动画应用于类名为loader的元素。
🚀第三步我们要使用Jquery库做相应的功能实现
直接看js代码
$(document).ready(function() {
// 在页面加载完成后显示加载动画
$("#loading").show();
// 模拟延迟操作（这里使用setTimeout函数）
setTimeout(function() {
// 完成加载后隐藏加载动画
$("#loading").hide();
//显示内容
$("#div_One").css('visibility','visible') ;
// 这里可以添加其他内容或执行其他操作
}, 3000);
});👉在上述代码中，在页面加载完成后使用jQuery的 $(document).ready(function()函数来显示加载动画。之后，可以通过setTimeout函数模拟延迟操作，并在操作完成后隐藏加载动画。你可以根据需要调整延迟时间和添加其他内容或操作。
总结
到此这篇关于jquery实现html页面先加载内容过几秒后显示数据的文章就介绍到这了,更多相关jquery先加载内容后显示数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了jQuery属性选择器用法,结合实例形式分析了jQuery中针对属性的判断与匹配相关操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery的ready方法实现原理分析的相关资料,需要的朋友可以参考下2016-10-10
主要是为了往后的项目中方便实现这类型的功能，在之前做问卷调查那个应用中，就用到这个来显示结果，但当时开发时并不用是插件的，一大堆代码，看也烦，用起来很麻烦2012-09-09
我经常抱怨jQuery的DOM操作性能并不优秀，并且经常尝试用一些方法去进行优化，但是越是优化，越是沮丧地发现jQuery其实已经做得很好，从使用者的角度能够进行的优化实在有限2011-02-02
这篇文章主要为大家详细介绍了jquery插件实现搜索历史，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家详细介绍了jQuery插件实现可输入和自动匹配的下拉框,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了jQuery EasyUI Panel面板组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了jquery实现二级导航下拉菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
表单提交的时候 ，是根据元素的name这个属性来的，只要不加name属性 就不会提交，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
选择器的意义就是将众多html代码中准确的找出我们想找的单元。接下来将常见的选择器以及作用列举出来，对jQuery常见的选择器及用法感兴趣的朋友一起看看吧2016-12-12
最新评论