JavaScript 是一种用于网页开发的脚本语言，可以通过img标签来加载图片。当一个网页打开时，所有的 HTML、CSS 和 JavaScript 代码都会被下载到客户端，并在浏览器中解析和渲染。在加载过程中，图片是其中一种资源，需要使用 JavaScript 动态加载。本文将介绍 JavaScript 加载图片的几种方法。

一、使用Image()对象

let img = new Image();img.src = '/post/path/to/image.jpg';document.body.appendChild(img);

使用Image()对象是一种最常见的方法，可以创建一个包含图片的新对象。这种方法也是最简单的，直接设置图片的src属性就可以了。当图片加载完成后，可以将它添加到文档中，如上面的代码所示。这种方法也可以用来预加载图片。

二、使用XMLHttpRequest()对象

let xhr = new XMLHttpRequest();xhr.open('GET', 'path/to/image.jpg', true);xhr.responseType = 'blob';xhr.onload = function () {if (this.status === 200) {let objUrl = URL.createObjectURL(this.response);let img = document.createElement('img');img.src = objUrl;document.body.appendChild(img);}};xhr.send();

通过XMLHttpRequest()对象来加载图片，可以更好地控制图片的加载过程。在该方法中，将图片以二进制格式加载，并在加载完成后创建一个包含图片的对象 URL，并将其添加到文档中。这种方法也可以用来加载其他类型的文件。

三、使用fetch()方法

fetch('path/to/image.jpg').then(response =>response.blob()).then(blob =>{let objUrl = URL.createObjectURL(blob);let img = document.createElement('img');img.src = objUrl;document.body.appendChild(img);});

fetch()是一个用于网络请求的现代化 API，也可以用于加载图片。使用该方法，可以轻松地通过 Promise 链式调用来加载和处理图片。在首次调用后，将使用blob()方法将响应转换为一个二进制对象，并将其作为参数传递给下一个 promise 对象。

四、使用第三方库

$('#img').attr('src', 'path/to/image.jpg');

像 jQuery 这样的第三方库可以轻松地加载和处理图片。通过attr()方法，可以设置图片的src属性。这种方法也适用于其他库，如 React、Vue 等。

总结

以上是 JavaScript 加载图片的几种实现方式，每种方法都有其优缺点。选择合适的方法取决于具体的应用场景。在实际开发中，可以根据需求来选择最适合的方法，以提高网页的性能和用户体验。