AbortController 能否终止 通过建立img标签 发起的图片请求？

Question

需求：很多图片加载时，想停止一部分不再需要显示的未完成请求。例如前端有个假分页，在快速切换分页时，取消掉之前页未完成的响应。
我尝试寻求的方案：在MDN上查到

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

但是不清楚如何在img标签发起的图片请求上使用

Answer 1

用 JS 创建 Image 对象

const image = new Image();
image.src = 'https://example.com/image.png';

// 取消加载
image.src = '';

用 fetch API 加载图片

const controller = new AbortController();
const signal = controller.signal;

fetch('https://example.com/image.png', { signal })
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  });

// 取消请求
controller.abort();

用 CSS 控制图片的显示

如果你只想控制图片的显示，不是取消请求，你可以用 CSS 来隐藏不想显示的图。