不发送请求设置img标签的src属性

Question

作为构建复制粘贴代码的一部分，我们必须使用一个dom元素将文本/其他dom元素附加到其中，最终结果将是可复制的代码。

然而，当附加图像元素时，浏览器始终会发出对图像src的请求。

有没有什么办法可以避免这种情况？

即。

var img = document.createElement('img');
img.src = 'http://dummy.com';

不通过浏览器向dummy.com发送请求吗？

我问这个问题的原因是我有一个模板，看起来像这样：

<div class="container">
    <div class="items-container">
       <generated tags here>
    </div>
</div>

生成的标签中包含img。

我试图将带有图像的a标签附加到HTML中，以便可以将其提供给用户在他们的电子邮件广告中使用。

但我想这是不支持的。

最终，我用{{token}}代替了真正的HTML，然后使用字符串（很丑，但有效）。

- PiniH

---

在 src 中使用 base64 编码，它不会触发请求。否则它将总是触发请求。 - murli2308

PiniH - 你能澄清一下吗：你是想让一个img元素有指定的src，但浏览器忽略它并不请求图像吗？我认为你不能这样做，但如果这就是你的问题，那么这不是那个其他问题的重复，所以我会重新打开你的问题。 - nnnnnn

在我看来，这个问题的方法是错误的。如果你不想加载 src，就不要使用 src。请参考链接线程中 @argon 或 @BoltClock 的评论。 - Andrea Casaccia

@nnnnnn 是的，我正在寻找它具有源代码，并且浏览器不会发出请求。 - PiniH

这不是重复的，至少从标记为重复的问题来看。 - Marcos Pérez Gude

Answer 1

经过更多的研究，似乎是不可能的，除非我漏掉了某个浏览器API。

任何具有src的新Image标签都会导致浏览器发出请求，即使它只存在于内存中或包含在代码块中。

- PiniH

Answer 2

你可以创建HTML5的data-*自定义属性来实现这个功能。在this中查看相关信息。

你可以将图片地址存储在data-address自定义属性中，当你想要加载图片时，获取该地址并设置为src属性。可以参考我的示例。

var imageSrc = "https://www.w3.org/2008/site/images/w3devcampus.png"

var image = document.getElementById("image");
var srcChange = document.getElementById("srcChange");
var imageLoad = document.getElementById("imageLoad");

srcChange.addEventListener("click", function(){
    image.setAttribute("data-address", imageSrc);
});

imageLoad.addEventListener("click", function(){
    var src = image.getAttribute("data-address");
    image.setAttribute("src", src);
});

<img id="image" src="https://www.w3.org/2008/site/images/logo-w3c-screen-lg" />
<br/>
<button id="srcChange">Change src</button>
<button id="imageLoad">Load image</button>

为了测试它，点击 Chnage src 按钮，然后点击 Load image 按钮。

- Mohammad

Answer 3

现在已经是2022年了，使用本地浏览器API非常容易实现。使用loading="lazy"。

以下是一个示例：

// Create an image
const img = document.createElement('img')
// Set the image to load lazily
img.loading = "lazy"
// Set the src
img.src = "/foo.jpg"

只有在图像实际呈现到页面上并满足浏览器对延迟加载图像的条件时，图像才会被下载。更多信息请点击这里。

请注意，在设置图像src之前，必须先设置loading="lazy"。如果先设置src属性，然后再设置loading="lazy"是无效的，此时浏览器会立即下载图像。但只要先设置loading="lazy"，这在所有主流浏览器中都可以正常工作。

- zgreen