非同步呼叫允許我們在主執行
Posted: Thu Dec 26, 2024 5:55 am
Loader CSS：它們是什麼以及為什麼需要它們
撰寫者埃迪·維埃托
|
2023 年 2 月 7 日星期二
閱讀時間： 4 分鐘
更新於2023 年 7 月 24 日星期一
CSS 載入器是在等待網頁行程完成時顯示的動畫。它是透過 CSS 創建的。這些元素基本上用於提供視覺響應，這樣人們就不會認為網站已被掛起。
它們比您想像的更常見，主要用於非同步呼叫伺服器時，或者換句話說，當我們使用 AJAX 時。
緒中執行另一條指令的同時執行其他進程。
目錄
一點歷史
網站載入過程中，客戶端和伺服器之間有很多流程和互動。隨著技術和通訊的進步，這種互動變得越來越即時，然而，幾年前並非如此。
在您的電腦和您要求的網站的伺服器之間的等待期間，有必要告訴使 巴西電報數據 用者正在發生某些事情，以便他們不會按任何按鈕或重新加載頁面。如果沒有視覺刺激，您可以假設網站已關閉或通訊已被切斷。此時就是裝載機出現的時候。
起初，載入器完全是用 JavaScript、Java 或透過 GIF 製作的，因為在 90 年代沒有其他方式在網路上提供動畫。儘管載入器的出現（以及隨之而來的消失）仍然由 JS 控制，但如今的元素是透過 CSS 建構的。因此得名 CSS 載入器。
使用CSS來實作載入器有很多優點。最重要的一點是它們的重量很輕。這似乎是顯而易見的，但在通訊過程中，我們最感興趣的是網站快速加載其所有元件，包括 CSS 載入器。通常，透過一些 CSS 規則就可以使載入程式具有視覺吸引力和輕量級。在今天的文章中，我們將為您提供一個完整的創建示例，但請記住，就像您網站的404 頁面所發生的情況一樣，擁有一個適合您網站的個性化加載器會給用戶一種彷彿就在網站前面的感覺專業，並且您已經照顧到了哪怕是最小的細節。
為什麼 CSS 載入器是必要的
您可能會錯誤地認為您的網站不需要載入程式。如果它託管在 dinahosting 上，則更是如此，因為它使用市場上最好的伺服器，並且其程式碼可能經過相當最佳化。
這種想法很常見，但卻是錯誤的。我們通常認為，頁面加載緩慢的唯一“罪魁禍首”就是我們自己。在任何通信中總是存在三個因素：發送者、接收者和媒介，在本例中是互聯網。您可以將頁面託管在最好的伺服器上，如果我們用戶的連線品質很差，則頁面將需要載入時間才能正確查看。
裝載機類型
雖然建立載入器沒有規則，但我們可以將它們分類為網路上最常用的樣式。
旋轉器
CSS 載入器：微調器
顧名思義，它是一個旋轉的裝載機。它的主要動畫是圍繞自身無限旋轉。這是最簡單的方法之一，我們稍後將向您解釋。
文字載入器
CSS 載入器：文字
為了演示加載過程，有時我們有興趣放置一條訊息，表明我們的頁面正在等待通訊結束。即使您認為文字已經足夠了，但始終添加一些動畫元素也很重要，以便給用戶帶來生動、動態網站的感覺。
球裝載機
球裝載機
感謝我們的朋友 Google 先生，使用加載器（其中通過重複某種類型的動畫的圓圈來實現動畫）已經變得時尚。
CSS 載入器範例
我們將教您如何建立一個基本的 CSS 載入器，也是最常用的載入器之一：旋轉器。您只需要一點 HTML 和 CSS。只需很少的幾行，您就可以達到非常優雅的效果。
橙色圓形裝載機
請記住，我們已經寫了一篇關於主要 IDE 和程式碼編輯器的文章，這將在程式碼編寫過程中為您提供幫助，因為其中許多都具有自動完成功能。
機的容器。我們標記一個類，在其中添加必要的規則來實現動畫，例如spinner。
創建容器後，我們現在轉到 CSS。首先我們給它一個大小。在我們的例子中，寬和高均為 40 px。然後我們加上一個橘色邊框，就像我們的企業形像一樣，最後我們留下一個空邊框。 （我們需要參考才能看到轉彎）
我們的載入器類別中需要的最後一個屬性是動畫。我們新增動畫屬性，並為其命名，例如spin。我們以無限循環的方式提供一秒鐘的持續時間。
最後我們定義元素的動畫。我們輸入 0% 的初始位置和 100% 的最終位置，瞧！
我們的建議是，如果可以的話，您可以生成自己的加載程序，但如果由於某種原因您不能或不想生成，有許多網站提供了可供使用的不同加載程序的存儲庫。
撰寫者埃迪·維埃托
|
2023 年 2 月 7 日星期二
閱讀時間： 4 分鐘
更新於2023 年 7 月 24 日星期一
CSS 載入器是在等待網頁行程完成時顯示的動畫。它是透過 CSS 創建的。這些元素基本上用於提供視覺響應，這樣人們就不會認為網站已被掛起。
它們比您想像的更常見，主要用於非同步呼叫伺服器時，或者換句話說，當我們使用 AJAX 時。
緒中執行另一條指令的同時執行其他進程。
目錄
一點歷史
網站載入過程中，客戶端和伺服器之間有很多流程和互動。隨著技術和通訊的進步，這種互動變得越來越即時，然而，幾年前並非如此。
在您的電腦和您要求的網站的伺服器之間的等待期間，有必要告訴使 巴西電報數據 用者正在發生某些事情，以便他們不會按任何按鈕或重新加載頁面。如果沒有視覺刺激，您可以假設網站已關閉或通訊已被切斷。此時就是裝載機出現的時候。
起初，載入器完全是用 JavaScript、Java 或透過 GIF 製作的，因為在 90 年代沒有其他方式在網路上提供動畫。儘管載入器的出現（以及隨之而來的消失）仍然由 JS 控制，但如今的元素是透過 CSS 建構的。因此得名 CSS 載入器。
使用CSS來實作載入器有很多優點。最重要的一點是它們的重量很輕。這似乎是顯而易見的，但在通訊過程中，我們最感興趣的是網站快速加載其所有元件，包括 CSS 載入器。通常，透過一些 CSS 規則就可以使載入程式具有視覺吸引力和輕量級。在今天的文章中，我們將為您提供一個完整的創建示例，但請記住，就像您網站的404 頁面所發生的情況一樣，擁有一個適合您網站的個性化加載器會給用戶一種彷彿就在網站前面的感覺專業，並且您已經照顧到了哪怕是最小的細節。
為什麼 CSS 載入器是必要的
您可能會錯誤地認為您的網站不需要載入程式。如果它託管在 dinahosting 上，則更是如此，因為它使用市場上最好的伺服器，並且其程式碼可能經過相當最佳化。
這種想法很常見，但卻是錯誤的。我們通常認為，頁面加載緩慢的唯一“罪魁禍首”就是我們自己。在任何通信中總是存在三個因素：發送者、接收者和媒介，在本例中是互聯網。您可以將頁面託管在最好的伺服器上，如果我們用戶的連線品質很差，則頁面將需要載入時間才能正確查看。
裝載機類型
雖然建立載入器沒有規則，但我們可以將它們分類為網路上最常用的樣式。
旋轉器
CSS 載入器：微調器
顧名思義，它是一個旋轉的裝載機。它的主要動畫是圍繞自身無限旋轉。這是最簡單的方法之一，我們稍後將向您解釋。
文字載入器
CSS 載入器：文字
為了演示加載過程，有時我們有興趣放置一條訊息，表明我們的頁面正在等待通訊結束。即使您認為文字已經足夠了，但始終添加一些動畫元素也很重要，以便給用戶帶來生動、動態網站的感覺。
球裝載機
球裝載機
感謝我們的朋友 Google 先生，使用加載器（其中通過重複某種類型的動畫的圓圈來實現動畫）已經變得時尚。
CSS 載入器範例
我們將教您如何建立一個基本的 CSS 載入器，也是最常用的載入器之一：旋轉器。您只需要一點 HTML 和 CSS。只需很少的幾行，您就可以達到非常優雅的效果。
橙色圓形裝載機
請記住，我們已經寫了一篇關於主要 IDE 和程式碼編輯器的文章，這將在程式碼編寫過程中為您提供幫助，因為其中許多都具有自動完成功能。
機的容器。我們標記一個類，在其中添加必要的規則來實現動畫，例如spinner。
創建容器後，我們現在轉到 CSS。首先我們給它一個大小。在我們的例子中，寬和高均為 40 px。然後我們加上一個橘色邊框，就像我們的企業形像一樣，最後我們留下一個空邊框。 （我們需要參考才能看到轉彎）
我們的載入器類別中需要的最後一個屬性是動畫。我們新增動畫屬性，並為其命名，例如spin。我們以無限循環的方式提供一秒鐘的持續時間。
最後我們定義元素的動畫。我們輸入 0% 的初始位置和 100% 的最終位置，瞧！
我們的建議是，如果可以的話，您可以生成自己的加載程序，但如果由於某種原因您不能或不想生成，有許多網站提供了可供使用的不同加載程序的存儲庫。