HTML中的图片如何通过JS动态加载

在网页开发过程中，我们常常需要根据用户交互、数据返回结果等动态加载图片，而不是在HTML中提前写死所有图片资源。那么HTML中的图片如何通过JS动态加载呢？下面将介绍几种常用的方法，大家可以根据实际需求选择使用。

方法一：直接操作现有img标签的属性

如果页面中已经存在<img>标签，我们只需要通过JS修改它的src属性，就可以实现图片的动态切换和加载。

首先我们在HTML中准备一个空的img标签：

<img id="dynamicImg" alt="动态加载的图片">

然后通过JS获取这个标签，设置它的src属性即可：

// 获取img元素
const imgElement = document.getElementById('dynamicImg');
// 设置图片地址，动态加载图片
imgElement.src = 'https://ipipp.com/sample-image.jpg';
// 可以监听加载完成事件
imgElement.onload = function() {
    console.log('图片加载完成');
};
// 监听加载失败事件
imgElement.onerror = function() {
    console.log('图片加载失败');
};

方法二：创建新的img元素动态插入页面

如果页面中原本没有img标签，需要动态创建并插入到指定位置，也可以通过JS实现。

我们可以通过document.createElement创建img元素，设置相关属性后再插入到DOM中：

// 创建img元素
const newImg = document.createElement('img');
// 设置图片地址
newImg.src = 'https://ipipp.com/new-image.jpg';
// 设置其他属性
newImg.alt = '新创建的动态图片';
newImg.width = 300;
// 插入到页面的指定容器中，假设容器id为imgContainer
const container = document.getElementById('imgContainer');
container.appendChild(newImg);

方法三：使用Image对象预加载图片

如果我们需要提前加载图片，等加载完成后再插入到页面，或者需要判断图片是否加载成功，可以使用JS的Image对象实现预加载。

// 创建Image对象
const imgObj = new Image();
// 监听加载完成事件
imgObj.onload = function() {
    console.log('图片预加载完成');
    // 加载完成后可以插入到页面
    const container = document.getElementById('imgContainer');
    container.appendChild(imgObj);
};
// 监听加载失败事件
imgObj.onerror = function() {
    console.log('图片预加载失败');
};
// 设置图片地址，开始加载
imgObj.src = 'https://ipipp.com/preload-image.jpg';

方法四：批量动态加载多张图片

如果需要动态加载多张图片，我们可以结合数组和循环来实现，比如从接口获取图片地址列表后批量加载：

// 图片地址列表，实际开发中可以从接口获取
const imgList = [
    'https://ipipp.com/img1.jpg',
    'https://ipipp.com/img2.jpg',
    'https://ipipp.com/img3.jpg'
];
// 获取容器
const container = document.getElementById('imgContainer');
// 循环加载每张图片
imgList.forEach(function(imgUrl) {
    const img = document.createElement('img');
    img.src = imgUrl;
    img.alt = '批量加载的图片';
    container.appendChild(img);
});

注意事项

• 动态设置src属性时，建议先设置onload和onerror事件，再设置src，避免部分浏览器下事件监听不到。
• 如果图片地址是跨域的，需要后端配置对应的跨域头，否则可能出现加载异常。
• 实现图片懒加载时，可以结合IntersectionObserver API，在图片进入视口时再动态设置src，减少初始页面加载压力。

JS动态加载图片HTML_img标签JavaScript_DOM操作图片懒加载修改时间：2026-05-29 22:03:40