/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Preloading CSS images in the <body> tag?

I’ve been trying to use CSS as much as possible for all my layout design, keeping as much to basic html as much as possible for the main content.

Using external stylesheets, I’m asking for the page to load some background animated gif images (2kb and 9kb each). These are then supposed to be a syncronised animation (ie changing frames at as close to the same moment as possible).

Unfortunately though, because the image files are found only in the external style sheets, they load at slightly different times, the first time the page is opened (and this particular animation is most important for the very first index page into the site).

I’m tying not to use JavaScript to PreLoad them into the browser, as I’d much rather keep things with html and CSS. I’m sure that quite a few years ago when I used to use image rollovers more, I used to preload the images somehow in the main <body> tag.

Something along the lines of this:

[code=html]<body class=”tta” onload=”img.src=”/css/graphics/sectional/000.gif” ;”/css/graphics/header/sectional-header-000.gif””>[/code]

(just clearly not like this, as that’s all wrong!)

Was it a weird delusion that I did something like this in the past, or is it all just done in JavaScript in the current valid markup?

Sorry for asking something I’m sure should be a simple solution. I’ve spent the last hour looking through my old books, and trying to find examples on the web.. unfortunately all the old sites I did something from what I recall to be similar, are now overwritten!

I look forward to having my sanity restored!

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@happy_handsauthorJan 17.2008 — Cheers Ron,

Although I wanted to preload the images into my first index page, rather than a second or third page, and the examples provided with the display:none option weren't quite what I was looking for, it has given me an idea to put the images somewhere towards to the top of the html, with the display:none attribute.

That way, after the page has loaded the html content and layout (but not displayed the two images), and then referenced the images tucked into the external stylesheet, they should be there ready and waiting.

So thank you ? You have been really helpful.
Copy linkTweet thisAlerts:
@Major_PayneJan 17.2008 — You're welcome, but you did all the hard work. LOL Glad you found a solution you could use without JavaScript.

Ron
×

Success!

Help @happy_hands 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.6,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...