高分技术：让图片加载更快、更有趣

2023-11-27 02:37:13

懒加载是一种优化网站加载速度的常用技术，它通过仅在需要时加载图像来实现。在图片懒加载中，图片不会在页面加载时立即加载，而是在用户滚动到它们所在位置时才加载。这可以显著缩短页面加载时间，特别是在包含大量图像的页面上。

实现图片懒加载的步骤

给每个图片添加一个类名，如 "lazyload"。
在页面底部添加一个JavaScript脚本，该脚本将查找所有具有 "lazyload" 类名的图像，并仅在它们出现在视口中时加载它们。

// 获取所有具有 "lazyload" 类名的图像
const images = document.querySelectorAll(".lazyload");

// 循环遍历所有图像
images.forEach((image) => {
  // 创建一个新的 Image 对象
  const newImage = new Image();

  // 设置新 Image 对象的源属性
  newImage.src = image.dataset.src;

  // 监听新 Image 对象的加载事件
  newImage.addEventListener("load", () => {
    // 将新 Image 对象插入到页面中
    image.replaceWith(newImage);
  });
});

使用模糊图片作为加载占位符

为了在图片加载完成之前向用户显示一些东西，可以将模糊图片作为加载占位符。这将有助于防止页面在加载图像时出现空白区域，并且可以改善用户体验。

<img class="lazyload" data-src="image.jpg" alt="Image" style="filter: blur(10px);">

使用自定义loading动画

还可以使用自定义loading动画来美化图片加载过程。这将有助于让用户知道图片正在加载，并且可以进一步改善用户体验。

// 创建一个新的 div 元素
const loading = document.createElement("div");

// 设置 div 元素的类名
loading.className = "loading";

// 将 div 元素插入到页面中
document.body.appendChild(loading);

// 监听所有具有 "lazyload" 类名的图像的加载事件
images.forEach((image) => {
  // 创建一个新的 Image 对象
  const newImage = new Image();

  // 设置新 Image 对象的源属性
  newImage.src = image.dataset.src;

  // 监听新 Image 对象的加载事件
  newImage.addEventListener("load", () => {
    // 隐藏 loading 元素
    loading.style.display = "none";

    // 将新 Image 对象插入到页面中
    image.replaceWith(newImage);
  });

  // 监听新 Image 对象的错误事件
  newImage.addEventListener("error", () => {
    // 隐藏 loading 元素
    loading.style.display = "none";

    // 显示错误消息
    image.textContent = "Error loading image";
  });

  // 在图像加载时显示 loading 元素
  image.addEventListener("loading", () => {
    loading.style.display = "block";
  });
});