/    Sign up×
Community /Pin to ProfileBookmark

Precaching background images

Copy linkTweet thisAlerts:
Oct 11.2009

What I am currently trying to achieve is to download a dynamically created image in the background, then assigning it to an elements backgroundImage style after it has been successfully completed, preventing a whitescreen.

For example:

[CODE]var $image = new Image();
$image.onload = function()
{
document.getElementById(“element”).style.backgroundImage = ‘url(‘ + this.src + ‘)’;
};
$image.src = “/images/background.png”;[/CODE]

This works as expected in FireFox, but in IE and Chrome the background image is requested once again after it has been assigned to the element, ignoring the image in cache.

Has anyone ever done this before?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@donatelloOct 11.2009 — I am a cheater.

Whenever I have been confronted with tricky stuff like that I do a hack.

Create an absolute DIV 1000 pixels to the left of the screen. Put the image in there.

?
Copy linkTweet thisAlerts:
@thraddashauthorOct 11.2009 — Ok, so far I have managed to get it working in IE as well by adding extra headers to my dynamic image (PHP):

[CODE]header('Cache-Control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 60) . ' GMT');[/CODE]

...even though my .htaccess file is set to cache all images for days? Unfortunatelly this is going to leave a nice mess of cached files eventually.

Only Chrome left to fix.
×

Success!

Help @thraddash spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...