未插入文档的img设置src后资源立即加载，如何实现插入时再加载？

这个问题我碰到过好几次啦，核心原因是浏览器对<img>元素的src属性有特殊处理——只要你给它设置了src（哪怕是空字符串），不管元素有没有插入DOM，浏览器都会立刻尝试加载对应的资源。空字符串的话，浏览器会默认请求当前页面的URL，这就是你看到资源立即加载的原因。

下面给你两种靠谱的解决方案：

方案1：先插入DOM，再设置src #

最简单的思路就是：先创建元素、设置其他必要属性（比如alt），等把元素加到页面里之后，再给它赋值src。这样浏览器只会在元素插入文档后才发起资源请求：

// 创建img元素，但先不设置src
const img1 = document.createElement('img');
img1.setAttribute('alt', '浏览器栈图标'); // 可以提前设置alt等非src属性

// 先将元素插入到文档中
document.body.appendChild(img1);

// 现在再设置src，此时才会触发资源加载
img1.src = 'https://caniuse.com/img/browserstack.svg';
// 用setAttribute效果一样：img1.setAttribute('src', 'https://caniuse.com/img/browserstack.svg');

方案2：用自定义属性暂存src，插入后再替换 #

如果需要提前把资源地址存在元素上（比如做懒加载、批量处理逻辑），可以用data-src这类自定义属性暂存地址，等元素插入DOM后，再把值转移到src属性上：

// 创建img元素，用data-src暂存资源地址
const img1 = document.createElement('img');
img1.setAttribute('data-src', 'https://caniuse.com/img/browserstack.svg');
img1.setAttribute('alt', '浏览器栈图标');

// 插入文档
document.body.appendChild(img1);

// 插入完成后，将data-src的值赋给src，触发加载
img1.src = img1.dataset.src;
// 或者用getAttribute读取：img1.setAttribute('src', img1.getAttribute('data-src'));

这种方法还能扩展成懒加载逻辑——比如监听页面滚动，当图片进入可视区域时再把data-src转成src，进一步优化页面性能。

内容的提问来源于stack exchange，提问作者刘江宇