资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Preload Background Image

创作时间:

2025-01-22 19:14:27

作者:

@小白创作中心

Preload Background Image

在现代网页设计中，图片加载速度直接影响用户体验和页面性能。据统计，图片资源通常占据网页总资源的60%以上，因此优化图片加载是提升网页性能的关键环节。本文将介绍几种实用的CSS技巧，帮助开发者实现图片的高效加载。

CSS实现图片懒加载

图片懒加载是一种优化网页加载速度的技术，其核心思想是在用户滚动页面时，只加载当前可见或即将可见的图片，而不是一次性加载所有图片。这种方法可以有效减少初始加载时的网络请求和带宽占用，提高页面加载速度。

使用CSS的background-image属性

一种简单的图片懒加载方法是通过CSS的background-image属性来实现。你可以设置一个占位符图片作为元素的背景，然后通过JavaScript在需要时替换为真正的图片。

<div class="lazy-image" data-src="real-image.jpg"></div>

.lazy-image {
  background-image: url('placeholder.jpg');
  background-size: cover;
  /* 其他样式 */
}

// JavaScript代码用于监听滚动事件，并在需要时替换背景图片

使用CSS的content属性与伪元素

另一种方法是使用CSS的content属性和伪元素（如::before或::after）来显示占位符，然后通过JavaScript在适当的时候替换或显示真正的图片。

<div class="lazy-image" data-src="real-image.jpg"></div>

.lazy-image::before {
  content: attr(data-src);
  display: none; /* 初始时隐藏 */
  background-image: url(attr(data-src));
  background-size: cover;
  /* 其他样式 */
}

.lazy-image.loaded::before {
  display: block; /* 加载完成后显示 */
}

// JavaScript代码用于监听滚动事件，并在需要时添加`loaded`类名

使用Intersection Observer API

Intersection Observer API是现代浏览器提供的一个原生API，用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。利用这个API，我们可以更精确地控制图片的加载时机，而不需要频繁地检查滚动位置。

const images = document.querySelectorAll('.lazy-image');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const src = image.dataset.src;
      image.src = src;
      image.classList.remove('lazy-image');
      observer.unobserve(image);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

在这个示例中，我们为所有带有.lazy-image类的图片元素设置了Intersection Observer。当图片进入视口时，JavaScript会获取图片的data-src属性并将其设置为src属性，从而触发图片的加载。同时，我们移除了lazy-image类名并停止观察该元素，以避免不必要的重复操作。

关键CSS属性详解

background-image属性

background-image属性用于设置元素的背景图像。它可以是一个URL，指向图像文件的位置，也可以是渐变函数，用于创建渐变背景。background-image属性可以应用于任何HTML元素，但最常见的是应用于div、header、section等块级元素。

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

object-fit属性

object-fit属性用于控制图像或视频在其容器中的适应和定位方式。它有以下几种属性值：

fill：默认值。替换元素的内容将被拉伸以填充元素的内容框。这可能会导致内容的长宽比发生变化。
contain：替换元素的内容将被缩放以适应元素的内容框，同时保持其长宽比。这可能会导致内容框的某些部分没有被替换元素的内容覆盖。
cover：替换元素的内容将被缩放以完全覆盖元素的内容框，同时保持其长宽比。这可能会导致内容的一部分在元素的内容框外不可见。
none：替换元素的内容不会被缩放，它将被裁剪以适应元素的内容框。
scale-down：此值的效果等同于none或contain，取决于哪个会导致更小的对象尺寸。

loading属性

loading属性用于控制图片的加载行为。它可以设置为以下值：

eager：图片会立即加载，即使它不在视口内。
lazy：图片只有在接近视口时才会加载，这可以节省带宽并提高页面加载速度。

<img src="image.jpg" loading="lazy" alt="A lazy-loaded image">

背景图加载优化

使用背景颜色

一种解决方案是设置一个与背景图相同的背景颜色。这样，在背景图加载之前，页面将显示该背景颜色，从而避免了白色“闪烁”的问题。

body {
  background-color: #007bff; /* 设置为与背景图相同的颜色 */
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

使用加载动画

另一个解决方案是使用加载动画来代替白色“闪烁”。加载动画可以吸引用户的注意力，让他们知道页面正在加载中，从而减少白色“闪烁”的影响。

body {
  background-image: url("loading.gif"); /* 加载动画的URL */
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #f5f5f5;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid #007bff;
  border-top-color: #f5f5f5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

使用预加载

另一种解决方案是使用预加载技术。通过预加载背景图，可以在页面加载过程中提前下载背景图，从而减少加载延迟，进而减少白色“闪烁”。

<!DOCTYPE html>
<html>
<head>
  <title>Preload Background Image</title>
  <link rel="preload" as="image" href="background.jpg">
  <style>
    body {
      background-image: url("background.jpg");
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>页面内容</h1>
</body>
</html>

实际应用案例

假设我们正在开发一个大型电商网站，首页需要展示数百个商品图片。如果一次性加载所有图片，会导致页面加载时间过长，影响用户体验。通过采用上述的懒加载技术，我们可以显著提升页面性能。

首先，在HTML中为每个商品图片添加data-src属性，用于存储实际的图片URL：

<div class="product">
  <img class="lazy-image" data-src="product1.jpg" alt="Product 1">
</div>
<div class="product">
  <img class="lazy-image" data-src="product2.jpg" alt="Product 2">
</div>

然后，在CSS中设置占位符样式：

.lazy-image {
  opacity: 0;
  transition: opacity 0.5s;
}

最后，使用Intersection Observer API实现懒加载：

const images = document.querySelectorAll('.lazy-image');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      image.classList.remove('lazy-image');
      observer.unobserve(image);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

通过这种方式，只有当用户滚动到某个商品图片时，该图片才会被加载和显示。这不仅大大减少了页面的初始加载时间，还降低了服务器的负载，提升了整体性能。