jquery html页面先加载内容过几秒后显示数据

news2024/11/13 15:16:24

😇作者介绍：一个有梦想、有理想、有目标的，且渴望能够学有所成的追梦人。

🎆学习格言：不读书的人,思想就会停止。——狄德罗

⛪️个人主页：进入博主主页

🗼推荐专栏：点击进入查看

🌼欢迎小伙伴们访问到博主的文章内容，在浏览阅读过程发现需要纠正的地方，烦请指出，愿能与诸君一同成长！

文章内容如下

✏️前言

✏️一、源码

✏️二、解读一下

✏️总结

文章内容如下

✏️前言

要在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);
    });