讓我們做一個花哨的，但簡單的頁面加載程序

現代網站，尤其是漸進的網絡應用程序和反應性網站，經常採用加載狀態來增強感知性能。這會產生更快的加載時間的幻想。雖然複雜的裝載機充斥著，但令人驚訝的有效解決方案需要最小的CS和JavaScript。

該教程展示了一種簡單而優雅的方法。

SVG和CSS：簡約的旋轉器

假設您已經設置了一個項目，那麼讓我們從旋轉器開始（也稱為預載器）。 SVG非常適合旋轉器的可擴展性和易於實現，類似於圖像標籤。雖然您可以從頭開始創建一個，但為了方便起見，我們將使用Loading.io的預製SVG。

將SVG集成到您的HTML中：

<div class="preloader">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="讓我們做一個花哨的，但簡單的頁面加載程序">
</div>

.preloader DIV充當容器，協助定位和控制頁面內容的可見性。

現在，讓我們樣式一下：

 .preloader {
  準項目：中心；
  背景：＃171616; / *深灰色背景 */
  顯示：Flex;
  身高：100VH；
  Jusify-content：中心；
  左：0;
  位置：固定；
  頂部：0;
  過渡：不透明度0.3S線性；
  寬度：100％；
  Z-Index：9999;
}

此CSS的關鍵方面：

• Flexbox確保中央屏幕放置。
• 深灰色的背景完全掩蓋了潛在的內容。根據需要調整不同頁面背景。
• position: fixed可防止滾動干擾， z-index: 9999確保其保持頂部。

此設置將旋轉器在屏幕上集中顯示。

javaScript以平滑淡出

為了創建淡出效果，我們將使用一個小的JavaScript函數。首先，選擇.preloader元素：

 const preloader = document.queryselector（'。preloader'）;

我們沒有將不透明度設置為零，而是將淡出的功能用於更平滑的過渡：

 const fadeeffect = setInterval（（）=> {
  如果（！preloader.style.opacity）{
    preloader.style.opacity = 1;
  }
  if（preloader.style.opacity> 0）{
    preloader.style.opacity- = 0.1;
  } 別的 {
    clear Interval（fadeeffect）;
  }
}，100）;

此功能逐漸減小每100毫秒的不透明度，直到達到零，然後停止。如果已經包含在項目中，請考慮使用jQuery的內置淡出功能。

最後，當窗口加載時調用該功能：

 window.addeventListener（'load'，fadeeffect）;

使用window.load可確保在淡出淡出之前加載所有頁面元素，包括CSS和SVG。

在HTML中添加一些內容並測試結果。這種簡單的方法僅使用圖像，CSS和一個小的JavaScript函數創建拋光加載效果。

以上是讓我們做一個花哨的，但簡單的頁面加載程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！