我们如何设置 DOM 中已加载图像的元素的背景图像？
我已经在 DOM 中加载了一个由变量 img 引用的图像。
我想将元素的背景图像设置为 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>
I already have a loaded image in the DOM referenced by the variable img.
I want to set the background image of an element to the loaded image in the DOM.
if i simply do "background-image:url('"+img.src+"')" problem is this relies on whether the image is cached by the browser (for user agents that explicitly do not store cache, or cache max size 0, basically, screwed)
If the image is not cached by the browser, a new image would be requested (which obviously is what I'm trying to prevent since the image is already in the dom re-requesting it is just unnecessary)
how do we set the background image of an element with an already loaded image in the DOM?
Simple test script to prove that the image would be re-requested, (use a browser which you can clear the cache on to test) 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以将图像下载为
img实例的.src的 Base64 字符串。将img.src复制到background-image:url将复制图像的此数据字符串，而不是检查缓存或下载它。例如：您可以此处获取图像的base64版本，然后使用 PHP 生成它，例如此处，或使用
canvas元素从图像生成 base64 字符串，如所述在这里。You can download the image as a base64 string for the
.srcof yourimginstance. Copying theimg.srctobackground-image:urlwill copy this data-string of the image instead of checking the cache or downloading it. For example:You can get a base64 version of your image here, generate it with PHP like here, or work with the
canvaselement to generate the base64 string from an image as explained here.您是否首先考虑过使用 CSS 加载图像？
编辑
我认为你将无法以“干净”的方式绕过这个。想象一下我们要做一个网络浏览器。您提出请求，将图像存储在某处并使用它。屏幕上显示的只是您存储的文件的渲染版本。一旦清除缓存，浏览器就必须再次请求它，除非它将它存储在其他地方，例如 tmp 文件夹或其他东西（用户无法删除）。
但我想这不是一个大问题，因为用户通常不会即时清除缓存。
Have you considered loading the image with CSS in the first place?
edit
I think you won't be able to bypass this in a "clean" way. Think like we're going to do a web browser. You make a request, store the image somwhere and use it. What's on the scren is just a rendered version of the file you stored. Once you clear the cache, the browser has to request it again unless it store it somewherelse, like a tmp folder or something (where the user can't delete).
But i guess this isn't a big issue since it's not usual for users to clear the cache on the fly.