在前端开发中，实现图片加载是一个常见且不可忽视的需求，图片作为一种高频使用的资源，正确且高效的加载图片能显著提高用户体验。
本文，我们将谈谈图片加载的实现方式以及各自实现的优缺点，然后我们基于new Image方式来谈谈单图片加载与多图片加载的实现以及优化。
图片加载的实现方式
在前端开发中，图片加载不仅仅是一个简单的 img 标签操作，尤其是在复杂的应用中，图片的加载往往涉及到异步操作、缓存策略、错误处理以及资源优化等多个方面，下面，我们将扩展讨论JavaScript中实现图片加载的几种常见方法，并探讨它们的应用场景和优缺点。
实现图片加载主要有如下几种方法:
使用 new Image() 创建图片对象。
使用 标签加载图片。
使用 fetch 和 Blob 对象加载图片。
使用 IntersectionObserver API和 setTimeout 加载图片（懒加载）。
使用 canvas 处理图片加载。
下面我们将谈谈每一种图片加载实现方法的优缺点和具体实现。
- 使用 new Image() 创建图片对象
new Image() 是 JavaScript 中用于动态创建图片对象的标准方式，它相对简单，且能直接控制图片的加载过程。通过 onload 和 onerror 事件，我们可以实现图片加载的回调处理。它的优缺点分别如下：
优点：
代码实现简单直观，而且代码量也很少。
可以直接控制图片加载的生命周期和处理加载失败等情况。
缺点：
不能直接在HTML中使用。
需要额外的JavaScript代码逻辑来显示图片（例如将图片插入到DOM中）。
我们来看一个具体的示例实现：
const loadImage = (src: string) =>
new Promise
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`Failed to load image at ${src}`));
img.src = src;});
使用方式如下:
loadImage('image.jpg')
.then((img) => document.body.appendChild(img))
.catch((err) => console.error(err));
- 使用
标签加载图片
直接通过 HTML 中的标签来加载图片是最传统和最常见的方式。通过 JavaScript，可以动态创建
元素，设置 src 属性，或者在页面中修改现有的 img 标签的 src 属性来加载新的图片。
优点：
简单易用，适合直接在DOM中显示图片。
浏览器会自动处理缓存、加载等细节。
缺点：
没有内建的加载失败回调机制，需要通过事件处理来处理。
控制不如 new Image() 灵活，无法在图像加载前进行复杂操作。
我们来看一个具体的示例实现：
const loadImage = (src: string) => {
const img = document.createElement("img");
img.onload = () => console.log("Image loaded");
img.onerror = () => console.error("Failed to load image");
img.src = src;
document.body.appendChild(img);
return img;
};
使用方式如下:
loadImage("image.jpg");
- 使用 fetch 和 Blob 对象加载图片
使用 fetch API 加载图片资源是一种现代的方式，可以在后台获取图片内容，然后将其转换为 Blob 对象，再通过 URL.createObjectURL() 创建图片的临时URL，最终将其显示在页面上。这样可以更加灵活地处理图片的获取和显示，比如控制请求头、缓存策略，或者使用自定义的加载进度。
优点：
通过 fetch 可灵活处理请求，例如添加自定义的请求头、控制缓存等。
能通过 Blob 和 ObjectURL 实现离线加载、缓存和预加载等高级功能。
可以和其他资源（如文件上传）结合处理。
缺点：
需要更多的代码，涉及到异步请求的处理。
浏览器支持问题，特别是在较老的浏览器中不完全支持。
我们来看一个具体的示例实现：