快捷導(dǎo)航

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

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

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

前言

要在HTML頁(yè)面中實(shí)現(xiàn)一個(gè)加載轉(zhuǎn)動(dòng)的效果，我們可以使用jQuery庫(kù)來(lái)簡(jiǎn)化操作。以下是一個(gè)示例代碼以展示如何使用jQuery實(shí)現(xiàn)一個(gè)基本的加載旋轉(zhuǎn)動(dòng)畫：

一、源碼

<!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; /* 藍(lán)色頂部邊框 */
          border-radius: 50%;
          width: 60px;
          height: 60px;
          animation: spin 2s linear infinite; /* 使用旋轉(zhuǎn)動(dòng)畫 */
        }
        @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() {
      // 在頁(yè)面加載完成后顯示加載動(dòng)畫
      $("#loading").show();
      // 模擬延遲操作（這里使用setTimeout函數(shù)）
      setTimeout(function() {
        // 完成加載后隱藏加載動(dòng)畫
        $("#loading").hide();
        //顯示內(nèi)容
        $("#div_One").css('visibility','visible') ;
        // 這里可以添加其他內(nèi)容或執(zhí)行其他操作
      }, 3000);
    });
  </script>
</html>

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

二、解讀一下

??第一步我們創(chuàng)建html頁(yè)面添加相應(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)樣式了一個(gè)關(guān)鍵的Css屬性：visibility

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

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

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

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

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

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

直接看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; /* 藍(lán)色頂部邊框 */
          border-radius: 50%;
          width: 60px;
          height: 60px;
          animation: spin 2s linear infinite; /* 使用旋轉(zhuǎn)動(dòng)畫 */
        }
        @keyframes spin {
          0% { transform: rotate(0deg); } /* 初始角度為0度 */
          100% { transform: rotate(360deg); } /* 最終角度為360度 */
        }

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

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

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

CSS動(dòng)畫（CSS animation）是一種通過(guò)在指定的時(shí)間內(nèi)逐漸改變?cè)氐臉邮絹?lái)創(chuàng)建動(dòng)畫效果的技術(shù)。它可以為網(wǎng)頁(yè)和應(yīng)用程序添加生動(dòng)、吸引人的交互效果，提升用戶體驗(yàn)。

注意

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

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

直接看js代碼

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

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

總結(jié)

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