Question

我已经在变量img引用的DOM中加载了一个图像。

我想将元素的背景图像设置为DOM中的加载图像。

如果我只是做“background-image：url（'”+ img.src +“'）”问题是这取决于浏览器是否缓存图像（对于明确不存储缓存或缓存的用户代理）最大尺寸0，基本上是拧紧的）

如果浏览器没有缓存图像，则会请求新图像（这显然是我试图阻止的，因为图像已经在dom中重新请求它是不必要的）

我们如何在DOM中设置已加载图像的元素的背景图像？

简单的测试脚本，用于证明图像将被重新请求，（使用可以清除缓存的浏览器进行测试）http://qweop.com/test/cache.php：

<!doctype html><html>
<head></head>
<body onload="load();" >
Step 0. Open your network inspector.<br>
Step 1. Wait for image to finish loading.<br>
Step 2. Clear your browser's cache (do not refresh this page);<br>
<button disabled="disabled" id="button" onclick="
    document.getElementById('div').style.backgroundImage='url('+document.getElementById('img').src+')';
">Step 3. After Cache is cleared, click</button>
<br>
<img id="img" width="500" height="500"  src="http://upload.wikimedia.org/wikipedia/commons/archive/4/4e/20090223155149!Pleiades_large.jpg" onload="
    document.getElementById('button').disabled='';"
/>
<div id="div" style="display:inline-block;width:500px;height:500px;background-color:yellow;"></div>
</body>
</html>

Answer 1

您可以将图像下载为.src实例的img的base64字符串。将img.src复制到background-image:url将复制图像的此数据字符串，而不是检查缓存或下载它。例如：

<img src = "data:image/gif;base64, SOMEBASE64STRING" />

你可以获得你的图像here的base64版本，使用像here这样的PHP生成它，或者使用canvas元素从图像生成base64字符串，如上所述{ {3}}

Answer 2

您是否考虑过首先使用CSS加载图像？

修改

我认为你无法以“干净”的方式绕过这一点。想想我们要做一个网络浏览器。您提出请求，将图像存储在somwhere并使用它。 scren上的内容只是您存储的文件的渲染版本。清除缓存后，浏览器必须再次请求缓存，除非它将其存储在某个地方，如tmp文件夹或其他东西（用户无法删除）。

但我想这不是一个大问题，因为用户通常不会动态清除缓存。

我们如何在DOM中设置已加载图像的元素的背景图像？

2 个答案:

修改