让我们做一个花哨的，但简单的页面加载程序

现代网站，尤其是渐进的网络应用程序和反应性网站，经常采用加载状态来增强感知性能。这会产生更快的加载时间的幻想。虽然复杂的装载机充斥着，但令人惊讶的有效解决方案需要最小的CS和JavaScript。

该教程展示了一种简单而优雅的方法。

SVG和CSS：简约的旋转器

假设您已经设置了一个项目，那么让我们从旋转器开始（也称为预载器）。 SVG非常适合旋转器的可扩展性和易于实现，类似于图像标签。虽然您可以从头开始创建一个，但为了方便起见，我们将使用Loading.io的预制SVG。

将SVG集成到您的HTML中：

<div class="preloader">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" 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中文网其他相关文章！