可通过JavaScript动态创建img元素并设置src实现图片加载，如document.createElement('img')并添加到DOM；2. 可监听onload和onerror事件处理加载成功或失败；3. 可通过修改已有img元素的src属性替换图片；4. 懒加载可通过data-src存储路径，待时机成熟再赋值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中有：
@@##@@JS中可以这样设置：
const image = document.getElementById('myImage');
image.src = 'new-image.jpg';
image.alt = '新图片';
4. 懒加载简单实现
将图片的真正地址存放在data-src属性中，等需要时再用JS赋值给src。
HTML:
@@##@@JavaScript:
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(img => {
img.src = img.dataset.src;
img.classList.remove('lazy');
});
基本上就这些。通过JS控制图片加载，能更好地管理资源和用户体验。不复杂但容易忽略细节，比如错误处理和加载状态。
