可通过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控制图片加载，能更好地管理资源和用户体验。不复杂但容易忽略细节，比如错误处理和加载状态。
以上就是HTML中的图片如何通过JS动态加载_HTML中图片通过JS动态加载方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583828.html
微信扫一扫 
支付宝扫一扫 
