JS动态加载图片技巧全解析

本文深入浅出地讲解了JavaScript动态加载图片的四种核心方法：创建并插入新img元素、监听onload/onerror事件实现加载状态控制、动态替换已有图片的src属性，以及基于data-src的懒加载实践；不仅提供了简洁实用的代码示例，还强调了性能优化、用户体验提升及错误处理等关键细节，是前端开发者掌握图片资源按需加载与精细化控制的必备指南。

在HTML中，图片可以通过JavaScript动态加载，而不是直接写在HTML标签里。这种方法常用于懒加载、条件加载或优化页面性能。实现方式主要是通过创建元素并设置其src属性，然后插入到页面中。

1. 创建img元素并设置src

使用document.createElement('img')7>创建一个新的图片元素，然后通过setAttribute或直接赋值的方式设置图片路径。

const img = document.createElement('img');
img.src = 'path/to/your/image.jpg';
img.alt = '动态加载的图片';
document.body.appendChild(img); // 将图片添加到页面
  

这样图片就会开始加载并显示在页面上。

2. 添加加载完成回调

有时需要在图片成功加载后执行某些操作，比如显示动画或记录日志，可以监听load事件。

const img = document.createElement('img');
img.src = 'path/to/your/image.jpg';
img.onload = function() {
  console.log('图片加载完成');
  document.body.appendChild(img);
};
img.onerror = function() {
  console.log('图片加载失败');
};
  

3. 动态替换已有图片

也可以通过JS修改已有标签的src属性来实现动态更换图片。

假设HTML中有：

<img id="myImage" src="">

const image = document.getElementById('myImage');
image.src = 'new-image.jpg';
image.alt = '新图片';
  

4. 懒加载简单实现

将图片的真正地址存放在data-src属性中，等需要时再用JS赋值给src。

HTML:

<img data-src="real-image.jpg" class="lazy">

const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(img => {
  img.src = img.dataset.src;
  img.classList.remove('lazy');
});
  

基本上就这些。通过JS控制图片加载，能更好地管理资源和用户体验。不复杂但容易忽略细节，比如错误处理和加载状态。

到这里，我们也就讲完了《JS动态加载图片技巧全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于HTML图片,JS动态加载的知识点！