在不发出请求的情况下设置img src

Set img src without issuing a request

本文关键字：情况下 设置 img src 请求      更新时间：2023-09-26

作为构建要复制和粘贴的代码的一部分，我们必须使用一个添加了text/其他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，然后使用了字符串（丑陋但有效）

经过更多的研究，这似乎是不可能的，除非我缺少一个浏览器API。

任何带有src的新Image标记都会导致浏览器发出请求，即使它只是在内存中，或者封装在代码块中。

您可以创建HTML5 data-*自定义属性并完成这项工作。请参见本。

您可以将图像地址存储在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按钮。

我们将在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"，这将适用于所有主要浏览器。

相关文章：