JS图片的加载方法

在网页开发中，图片加载是一个关键环节，它直接影响用户体验和页面性能。JavaScript 提供了多种加载图片的方法，下面将详细介绍。

最常见的方式是使用 Image 对象。通过创建 Image 实例，设置其 src 属性来加载图片。例如：

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
    document.body.appendChild(img);
};

在这段代码中，首先创建了一个 Image 对象，接着指定图片的路径。然后，通过 onload 事件监听图片加载完成，加载完成后将图片添加到页面的 body 元素中。这种方式简单直接，适用于大多数场景。

另一种方法是利用 XMLHttpRequest 对象。虽然它主要用于在后台与服务器进行数据交换，但也能用于加载图片。代码如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.jpg', true);
xhr.responseType = 'blob';

xhr.onload = function() {
    if (this.status === 200) {
        const blob = this.response;
        const imgUrl = URL.createObjectURL(blob);
        const img = new Image();
        img.src = imgUrl;
        document.body.appendChild(img);
    }
};
xhr.send();

这里通过 XMLHttpRequest 获取图片的二进制数据，将其转换为 Blob 对象，再创建一个对象 URL 供 Image 对象使用，最终将图片展示在页面上。这种方式适用于需要对图片加载过程进行更多控制的场景，比如添加加载进度条等。

还有一种现代的方法是使用 fetch API。fetch 提供了更简洁的语法来处理网络请求，加载图片的代码如下：

fetch('example.jpg')
 .then(response => response.blob())
 .then(blob => {
        const imgUrl = URL.createObjectURL(blob);
        const img = new Image();
        img.src = imgUrl;
        document.body.appendChild(img);
    });

fetch API 返回一个 Promise 对象，通过链式调用处理响应数据，最终展示图片。这种方式语法简洁，并且支持异步操作，使得代码的编写更加灵活。

在选择 JS 图片加载方法时，要根据项目的具体需求和场景来决定。不同的方法各有优劣，合理运用能有效提升网页的性能和用户体验。