返回

骨架屏--快速提升网页加载速度的良方

前端

在当今快节奏的网络世界中，网站的加载速度已成为影响用户体验的关键因素之一。而骨架屏技术的出现，为开发者提供了一种巧妙且有效的解决方案，以显著提升网页加载速度。

骨架屏是一种占位符内容，它在真实内容加载完成之前，以灰色的矩形或圆形框的形式显示在页面上。这种视觉反馈向用户表明页面正在加载，从而减轻他们对加载延迟的焦虑感。

本文将介绍两种实现简单的骨架屏方案，为开发者提供快速提升网站加载速度的实用指南。

方案 1：利用图片切换实现骨架屏效果

这种方法使用一张灰度骨架图作为占位符，并在真实内容加载完成后将其替换为原始图像。

步骤：

  1. 创建一张灰度骨架图，尺寸应与原始图像相同。
  2. 在 HTML 中使用 <img> 标签加载骨架图。
  3. 在 CSS 中添加以下规则，在真实图像加载完成后隐藏骨架图：
img.skeleton {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

img.skeleton.loaded {
  visibility: hidden;
  opacity: 0;
}
  1. 使用 JavaScript 在真实图像加载完成后添加 "loaded" 类：
const images = document.querySelectorAll("img.skeleton");

images.forEach((image) => {
  image.addEventListener("load", () => {
    image.classList.add("loaded");
  });
});

方案 2：利用 CSS + HTML 实现骨架屏效果

此方法使用 CSS 和 HTML 创建动态骨架元素，无需使用图像。

步骤：

  1. 在 HTML 中创建占位符元素，例如<div> 或<span>。
  2. 添加 CSS 规则，设置占位符元素的宽度、高度和背景色：
.skeleton-element {
  width: 100px;
  height: 100px;
  background-color: #efefef;
}
  1. 根据需要添加其他样式，例如圆角、阴影或动画。
  2. 当真实内容加载完成后，使用 JavaScript 隐藏骨架元素：
const elements = document.querySelectorAll(".skeleton-element");

elements.forEach((element) => {
  element.classList.add("hidden");
});