У меня уже есть загруженное изображение в DOM, на которое ссылается переменная img.
Я хочу установить фоновое изображение элемента для загруженного изображения в DOM.
если я просто делаю "background-image: url ('" + img.src + "')" проблема в том, что это зависит от того, кешируется ли изображение браузером (для пользовательских агентов, которые явно не хранят кеш, или кеш макс. размер 0, в основном, прикрученный)
Если изображение не кэшируется браузером, будет запрошено новое изображение (что, очевидно, я и пытаюсь предотвратить, так как изображение уже находится в доме и повторно запрашивает егопросто не нужно)
как установить фоновое изображение элемента с уже загруженным изображением в 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>