What is Digg?Sponsored by Best Buy
Best Buy finds gold in Iowa. view!
youtube.com - Best Buy employee, Danielle Kelly, sings her way into holiday campaign.
60 Comments
- Jero, on 10/12/2007, -1/+19This technique will not work. The last background-image property will be used as the real background for the element because that's how CSS works. So the last background-image property overwrites the previous ones. In this case the last background-image is an empty url() so no background will be used. However, even if the last background-image would be an existing URL, only that image will be loaded not the one defined earlier. In other words: Ok, this is lame.
- Jero, on 10/12/2007, -0/+13No, my point is that the images are not even downloaded. I made a testcase and checked Apache's accesslogs and it clearly says the images aren't accessed.
- inactive, on 10/12/2007, -3/+15This is not as fast as using JavaScript at the bottom of a page, immediately before the closing body tag.
This technique is actually slower on the first page load than not doing pre-loading - because CSS files are generally embedded before the closing head tag, so it takes longer for the body to appear.
Inaccurate and lame. And the technique was dated and surpassed years ago. - jarv, on 10/12/2007, -0/+10Jero is right, apache access logs show no access to the image files, also the Firefox Live HTTP Headers extension also shows the images are not requested
- SpringBoy, on 10/12/2007, -0/+8If you're only interested in preloading images for rollovers and such then a good method is with CSS sprites:
http://www.alistapart.com/articles/sprites - Lacero, on 10/12/2007, -2/+9What happens if JS was disabled?
- Dachande663, on 10/12/2007, -0/+6Pretty stupid method, adds extra unsemantic divs to your page and can be achieved in better ways. I.e. on rollovers on links etc you just make the image have both states and then use the background-position attribute to switch between them.
- Caius, on 10/12/2007, -1/+7Yes the code does validate - I just created http://caius.name/misc/image_css/ to test it. The link to validate it is http://tinyurl.com/noyuk
All you get is a warning about redefining the background-image 3 times. - Uruviel, on 10/12/2007, -0/+5or you place all your images that you want to preload in a div with #preloader. Then set your css to something like:
#preloader img {
position: absolute;
left: -110%; top: -110%;
width: 1px; height:1px;
}
Now don't set the alt atribute to something sensible, just leave it blank since you don't want to add any semantics to a image that you preload.
anyways that the trick I use, don't see that one often either. - inactive, on 10/12/2007, -1/+6"What happens if JS was disabled?"
For the < 2% of people who browse like this, not downloading .js files will probably compensate. If their browser still downloads the JS (although doesn't run it) - too bad.
Preloading for the majority is ideal. Preloading for everyone is impossible or not practicle. - mrblack, on 10/12/2007, -2/+6I think thats assuming you control all the images on your site with CSS. If not, for example if you have a shopping site with a thousands of images it might be worth add this CSS dynamically to the header of each page.
- zentro, on 10/12/2007, -0/+3Then you could just make separate divs for every image to be preloaded... Not slick, but it should work.
- jkrebs1, on 10/12/2007, -0/+3i tried this and didn't notice any difference
- olliholliday, on 10/12/2007, -1/+4this just plain doesn't work, it's a lame hack which relies on the browser being incredibly inefficient to work at all - it doesn't work in IE or firefox for example.
so why is this on digg? an extremely obvious hack which due to the fact that most browsers *aren't* stupid just plain doesn't work (and those browsers it does work on will no doubt be fixed soon). - akh1, on 10/12/2007, -0/+3Note that a user agent might not download images for an element with display:none; like Opera does not.
http://www.quirksmode.org/css/displayimg.html - Teh_Psyren, on 10/12/2007, -1/+4A bit of a no-brainer...
Plus aren't most CSS files cached straight away before the page loads? Which means the images will be loaded too. - Aeiri, on 10/12/2007, -1/+4I don't think that you don't validate just because you have a warning, when it says:
"Congratulations!
Valid CSS! This document validates as CSS!"
At the top.... - SamKellett, on 10/12/2007, -0/+2but that would look awful (and confusing) to a user with no CSS
- Ensnared, on 10/12/2007, -0/+2"There are a number of ways that his is beneficial, one of them is so that people cannot simply right click and save the images right off the page."
How is this beneficial? If you're worried people might steal your images, don't publish them. If someone wants them they'll get them, it just means a few extra clicks or an appropriate extension/addon/whathaveyou. - jzillan, on 10/12/2007, -0/+2think bigger picture. search engine bots don''t follow javascript but do follow css quite well ;)
FWIW...i would choose a css option over .js anyday. - WiBu, on 10/12/2007, -0/+1Whats wrong with just using a sprite sheet? Better in my opinion.
- jimmyt1988, on 10/08/2009, -0/+1wrong. It doesn't work in Opera.
I'm trying to come up with a solution now.
So hidden divs works in firefox and ie but not Opera. Neither does a javascript preloader. Basically, It's gay. - veritech, on 10/12/2007, -0/+1humble web dev, says "experts know best, css multiple background images = bad"
- phill, on 10/12/2007, -0/+1No Digg for me. Lame hack that doesn't even work. Use CSS the Sliding Doors. It's a much better way of doing pre-loading.
www.alistapart.com/articles/slidingdoors/ - PhrosTT, on 10/12/2007, -0/+1yeah that's what I do...
just have a div { top: -400px; left: -400px }
and throw all my rollovers and whatnot into it. - Ensnared, on 10/12/2007, -2/+3An interesting question is, will it validate?
- BooooooooB, on 10/12/2007, -5/+6That's pretty clever.
- Izzie, on 10/12/2007, -0/+1I'll choose CSS over JS too, the reason is the web is not intended to make content available to a majority, but to make content available to all.
JS has been used for abuse and with all the spyware/phising that is aroudn nowadays, users are becoming careful (think noscript in firefox).
But the situation where you have to choose a one and only technique are seldom, most of the time you can choose to combine techniques. "the best of both worlds" as randall would rant about.
But let's not forget we're talking about preloading images here, and preloading is about saving resources and time, and so it targeted toward the majority. So as long as the JS preload doesn't break the page if Js is blocked, and is doing its job right; there no reason not to use it.
what about a JS preload that will degrade in a CSS preload is JS is disabled/blocked? - MrDiaz, on 10/12/2007, -0/+1what is this? this is commonly used everywhere. I've been using this for a while now, how in hell this got to the front page? You can wrap this up on w3schools.
- jimmyt1988, on 10/08/2009, -0/+1Opera certainly doesn't like this.
In fact, Opera doesn't load hidden div images, javascript preloaders don't work.
It's a problem we all need to think about. - Rounin, on 10/12/2007, -0/+1Lame. I don't even see the practical point of pre-loading in the first place. No digg.
- SilentBobSC, on 10/12/2007, -0/+1Completely non-semantic, but could be used in a screen-only css doc, still seems a bit bloated...
- jimmyt1988, on 10/08/2009, -0/+1doesn't work in Opera
- Maxpower57, on 10/12/2007, -0/+1http://duggmirror.com
- oyam, on 10/12/2007, -0/+1This is lame and ignorant of what CSS is meant for. BTW, this is betting on browsers not optimizing CSS. What stops the browser from reading/processing only the last background-property? well nothing, but your images won't be preloaded either...
- ChadB, on 10/12/2007, -0/+0The site list this (non-working code) under a blog subtitle of 'Documenting Excellence'. (Picture Mr. Garrison with the necktie too tight!)
- pixelmech, on 10/12/2007, -0/+0This is nowhere near a "new" technique at all. This does not preload the image in IE. This stuff has been around since CSS rollovers came on the scene years ago. In fact for IE with CSS rollovers shifting background position, you have to load the background on the parent element as well because IE will flicker otherwise.
If you must preload images, use a simple JS array. - cazabam, on 10/12/2007, -4/+4"All you get is a warning about redefining the background-image 3 times."
So ... it doesn't validate. The question "Does it validate?" kind of implies the qualifier "Does it validate without warnings or errors." The fact that the validator runs and successfully spits out the warnings isn't really an affirmative answer in this case.
I've always found using what are essentially hacks and work-arounds based on particular implementations of standards in production code. As soon as an implementation of CSS doesn't do it this way, and instead only loads the first/last background image in any particular style, then this breaks, and there's nothing in the CSS standard that says it shouldn't. - damofknowledge, on 10/12/2007, -0/+0Awful technique, which completely ignores the purpose of stylesheets in the first place. This is a behavior which is best left to javascript, not an extra non-semantic wrapper. Besides shouldn't you be already defining backgrounds with the appropriate id or class elsewhere in your stylesheet? And I think it was pointed out that this will NOT work in IE less than seven since that browser doesn't cache backround images in css.
- DanAtkinson, on 10/12/2007, -2/+2This is indeed a commonly known 'trick' of loading images. There are a number of ways that his is beneficial, one of them is so that people cannot simply right click and save the images right off the page.
Others who prefer JS rollovers (instead of CSS options like hover) have to deal with small overheads. - hello2usir, on 10/12/2007, -0/+0
The whole concept of preloading itself is taking liberties from the users which a web site author shouldn't take.
Not only that but it's just plain bad design to tie your content so intimately with images. Most browsers allow you to disable images entirely, and some allow you to load images at your own discretion. Some browsers like Lynx don't even show images. This is why the ALT attribute is mandatory. Regardless, many users are impatient and won't appreciate having to wait n seconds for everything to load until they can see a site's content.
The www is filled to the brim with bad designers and their bad designs. And hacks like this just encourage more of it.
- syntaxer, on 10/12/2007, -0/+0There are IMHO much more simpler/better techniques - like this on WellStyled
http://wellstyled.com/css-nopreload-rollovers.html
Ok, in some cases this isn't the best solution, but it works great. - mrblack, on 10/12/2007, -1/+1yeah it wont show.. that's the point. However your browser would have downloaded the image anyhow to be used elsewhere on the site.
- mrblack, on 10/12/2007, -1/+1Ah ok.. I was under the impression that the browser would just grab any image urls not just look for the last definition, in this case background-image. I would like to see if this would work on selection of browsers.
- Ensnared, on 10/12/2007, -1/+1Bleh, clicked the wrong reply-link :p
- SanityInAnarchy, on 10/12/2007, -0/+0What would be the point of preloading with JS disabled? The only thing I remember preloading being useful for is rollovers and other JS tricks, so it makes sense to assume that iff your user has JS, you're going to preload. The CSS trick means that those who have CSS enabled but JS disabled will waste some bandwidth downloading images they'll never see.
- willcode4beer, on 10/12/2007, -0/+0"so why is this on digg?"
Looks like it was a way to gets lots of advertising exsposure.
Look at the other half of the page. - hazemtorab81, on 10/12/2007, -0/+0another good tutorial:
http://www.ajaxlines.com/ajax/stuff/article/preload_images_with_javascript.php - vajaaheparker, on 10/12/2007, -0/+0I'm new to digg and I just want to know how I can read the full synopsis, I click on the link and go to http://specere.net/?webtips. Does using CSS to preload images help the dial-up user experience? Is there validation for html like there is for css?
- chrisrad, on 10/12/2007, -5/+5pretty smart i guess, simple!
-
Show 51 - 60 of 60 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is