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

作者站长头像
站长
· 阅读数 23

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

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

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

回复
1个回答
avatar
test
2024-06-29

用 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 来隐藏不想显示的图。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容