服务器错误负载太大 base64 图像 - Javascript

当我们在使用 Javascript 加载 base64 图像时，有时会遇到服务器错误负载太大的问题。这通常是由于图像文件过大，在网络中传输时造成的负载过大引起的。

为了避免这种情况发生，我们可以采取以下措施：

1. 压缩图像

在将图像转换为 base64 字符串之前，我们可以使用一些工具对图像进行压缩，以减小文件大小。目前有许多在线工具和库可用于此。

比如说，我们可以使用 compressor.js 库来压缩图像：

import Compressor from 'compressorjs';

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', (event) => {
  const reader = new FileReader();

  reader.readAsDataURL(event.target.files[0]);

  reader.onload = (loadEvent) => {
    const image = new Image();

    image.src = loadEvent.target.result;

    image.onload = () => {
      new Compressor(image, {
        quality: 0.6,
        success(result) {
          // 将压缩后的图像转换为 base64 字符串并使用
          const base64Image = result.toDataURL('image/jpeg');
        },
        error(err) {
          console.error(err.message);
        },
      });
    };
  };
});

2. 懒加载

如果我们需要加载的图像过多，会导致页面负载过大，影响用户体验。在这种情况下，我们可以使用懒加载技术，即只加载当前显示在视图中的图像，而不是全部加载。

可以使用 lozad.js 库来实现图像懒加载：

import lozad from 'lozad';

const observer = lozad();
observer.observe();

在 HTML 中，我们可以将懒加载的图像使用 data-src 属性替代 src 属性，并且将 src 属性设置为一张占位图像。当图像进入视图中时，data-src 中的图像将被加载。

<img src="placeholder.jpg" data-src="image.jpg" class="lozad">

3. 分批加载

如果我们需要加载大量基于 base64 的图像，将它们全部加载是行不通的。因此，我们需要分多批加载这些图像，从而避免对服务器造成过大的负载。

const images = [...document.querySelectorAll('.lazy-image')];
const batchCount = 10;
const batchSize = Math.ceil(images.length / batchCount);

for (let i = 0; i < batchCount; i++) {
  const start = i * batchSize;
  const end = start + batchSize;

  setTimeout(() => {
    for (let j = start; j < end; j++) {
      const image = images[j];
      const src = image.getAttribute('data-src');

      image.src = src;
      image.classList.add('loaded');
    }
  }, i * 1000); // 间隔 1 秒
}

以上是几种解决服务器错误负载过大的方法，希望对你有所帮助。