快捷導(dǎo)航

jquery實現(xiàn)html頁面先加載內(nèi)容過幾秒后顯示數(shù)據(jù)

更新時間：2023年07月07日 09:41:09 作者：半杯可可

這篇文章主要給大家介紹了關(guān)于jquery實現(xiàn)html頁面先加載內(nèi)容過幾秒后顯示數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考借鑒價值,需要的朋友可以參考下

前言

要在HTML頁面中實現(xiàn)一個加載轉(zhuǎn)動的效果，我們可以使用jQuery庫來簡化操作。以下是一個示例代碼以展示如何使用jQuery實現(xiàn)一個基本的加載旋轉(zhuǎn)動畫：

一、源碼

<!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; /* 使用旋轉(zhuǎn)動畫 */
        }
        @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函數(shù)）
      setTimeout(function() {
        // 完成加載后隱藏加載動畫
        $("#loading").hide();
        //顯示內(nèi)容
        $("#div_One").css('visibility','visible') ;
        // 這里可以添加其他內(nèi)容或執(zhí)行其他操作
      }, 3000);
    });
  </script>
</html>

在上述代碼中，我們使用了CSS樣式創(chuàng)建了一個加載旋轉(zhuǎn)動畫。通過設(shè)置定位和居中樣式，將加載動畫放置在頁面的中心位置。然后，在頁面加載完成后使用jQuery的 $(document).ready(function()函數(shù)來顯示加載動畫。之后，可以通過setTimeout函數(shù)模擬延遲操作，并在操作完成后隱藏加載動畫。你可以根據(jù)需要調(diào)整延遲時間和添加其他內(nèi)容或操作。

二、解讀一下

??第一步我們創(chuàng)建html頁面添加相應(yīng)的標(biāo)簽和元素

直接看代碼

 <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內(nèi)聯(lián)樣式了一個關(guān)鍵的Css屬性：visibility

CSS的visibility屬性用于控制元素的可見性。它有兩個常用的取值：

visible：元素可見。這是默認值。
hidden：元素隱藏，但仍會占據(jù)布局空間。

和Css屬性display屬性的區(qū)別

與display屬性不同，當(dāng)元素的visibility設(shè)置為hidden時，該元素仍然存在于文檔流中，并且會占據(jù)頁面的布局空間。只是在渲染時不會顯示出來。

需要注意的是，通過修改visibility屬性來隱藏元素并不能阻止JavaScript等腳本對其進行操作或事件對其產(chǎn)生影響。如果需要完全隱藏元素，可以結(jié)合使用visibility和display屬性，將display設(shè)置為none，這樣元素就既不可見，也不占據(jù)布局空間了。

??第二步我們要使用CSS樣式創(chuàng)建了一個加載旋轉(zhuǎn)動畫

直接看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; /* 使用旋轉(zhuǎn)動畫 */
        }
        @keyframes spin {
          0% { transform: rotate(0deg); } /* 初始角度為0度 */
          100% { transform: rotate(360deg); } /* 最終角度為360度 */
        }

??這里用到了關(guān)鍵字：@keyframes 關(guān)鍵貼和animation 動畫

CSS中的關(guān)鍵幀（Keyframe）是用于創(chuàng)建CSS動畫的重要概念。關(guān)鍵幀允許您指定在動畫過程中元素應(yīng)該具有的樣式。

通過使用@keyframes規(guī)則，可以定義一個或多個關(guān)鍵幀，并在其中指定元素應(yīng)該在不同時間點上的樣式。每個關(guān)鍵幀都表示動畫過程中的一個特定時間點。

CSS動畫（CSS animation）是一種通過在指定的時間內(nèi)逐漸改變元素的樣式來創(chuàng)建動畫效果的技術(shù)。它可以為網(wǎng)頁和應(yīng)用程序添加生動、吸引人的交互效果，提升用戶體驗。

注意

@keyframes定義了名為spin的關(guān)鍵幀動畫。然后，通過將animation設(shè)置為spin，并設(shè)置為2s，將動畫應(yīng)用于類名為loader的元素。

??第三步我們要使用Jquery庫做相應(yīng)的功能實現(xiàn)

直接看js代碼

 $(document).ready(function() {
      // 在頁面加載完成后顯示加載動畫
      $("#loading").show();
      // 模擬延遲操作（這里使用setTimeout函數(shù)）
      setTimeout(function() {
        // 完成加載后隱藏加載動畫
        $("#loading").hide();
        //顯示內(nèi)容
        $("#div_One").css('visibility','visible') ;
        // 這里可以添加其他內(nèi)容或執(zhí)行其他操作
      }, 3000);
    });

??在上述代碼中，在頁面加載完成后使用jQuery的 $(document).ready(function()函數(shù)來顯示加載動畫。之后，可以通過setTimeout函數(shù)模擬延遲操作，并在操作完成后隱藏加載動畫。你可以根據(jù)需要調(diào)整延遲時間和添加其他內(nèi)容或操作。

總結(jié)

到此這篇關(guān)于jquery實現(xiàn)html頁面先加載內(nèi)容過幾秒后顯示數(shù)據(jù)的文章就介紹到這了,更多相關(guān)jquery先加載內(nèi)容后顯示數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！