I am looking for a way to have the background-images (CSS) load as if they were appearing once loaded, and not "rolling down". I'd rather have an image appear 300ms late in one flash instead of having it appear like a bad PowerPoint effect.
Any techniques or specific code that could be used (besides caching)?
Thanks,
jsfiddle http://jsfiddle.net/9fFKT/3/
$("#bg").hide();
$('#bg').load(function(){
$('#bg').show();
});
using jquery you can hide until it loads and display it once its loaded
Basically you'd need to either have the elements hidden on initial load, or to have no background set in CSS, add the image via JavaScript, then apply the CSS background with the onload event of each image.
CSS alone cannot do this.
You could load the image as hidden at the top of your page, so when you put it into the DOM later it is a cached copy. Or, you can put a hidden attribute on it, and after a 300ms timer, turn hidden off. The latter will do what you want with more certainty, but it depends on your viewers network speeds.
First, if your image appear in "rolling down" it's Image it's too heavy.
Exist different program or website for reduce your image for web ( without losing quality )
for sample, Yahoo SMUSH.IT! is good for that!
After, I don't know if existing a method for appear background-image after download... maybe in JavaScript...
Related
I'm confused on what makes background images that I set with css load when the image comes into view and sometimes not. That is, I have one scenario in my code (I can give examples if that would help) where I can watch my network traffic and I don't see the image get loaded over the wire until it scrolled into view. I had changed from using a standard img tag to the css background to make this happen.
Now, I have another simple example where I just have what seems to me to be the same
any guideline on when it gets loaded?
thanks
Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.
I can't test if the following CSS3 would work because it works too quick:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive.
Update
Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.
If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.
You could exploit css load order and overrides to achieve this result.
Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.
The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.
If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.
This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after
It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.
As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.
at the website I'm working on euroworker.no, I have a ton of CSS rollovers, that only load when rolled over, is there a way to force load these onLoad so that they don't flash when rolled over the first time? It makes the site look broken. I could use a <body onLoad...> but am not sure how to implement it.
Thanks.
Sure, just use image sprites. In short, this means you put both states of an image (default and hover) in one image file. Upon hover, you then shift the background-position of the element in question.
I have a site that uses a large centered background image, which naturally loads a tad slower than the other elements on the page. For the most part this works okay, but there is also a repeat-x background image that covers the background for large monitors. The only problem is that this smaller file loads first and flashes briefly before the large image loads fully. Is there a way to have the large image load first so it is in place before the repeating background image loads? Thanks!
I don't know whether there is a way to accomplish that but you can use either javascript or jquery to change your dom elements show priority.
There's no way using strictly css to absolutely control the order images load.
The browser will try to download the images in the order they're listed in the css file, so putting your large background iage first will help, but the download time is gonna make it a moot point more than likely.
You could load the larger background via javascript once the rest of the DOM has loaded if it's worth going that far.
I figured out the answer to my own question: Instead of repeating the whole pattern of the upper body, I used only the pattern portion that is where the main content is. This loads quickly and looks natural behind the content while the large image loads. Thanks Aaron for the reply.
Let's say I have my whole sites CSS in 1 css file so it is fairly large, I am wanting to know if a page uses 3 classes with something like below that request 3 images from the server, lets say there is something like 50 of these in the whole css file, does everyone get called/requested from the server or just the 3 that a page needs?
background-image:url(http://localhost/images/btn3.gif);
There's one easy way to find out (ok, not easier than just asking Stack Overflow). Put this into a CSS file:
#nonExistantElement {
background-image: url(myScript.php);
}
and make that script record the hit by writing to a file or something.
Ok, I've just done that myself now. Turns out: no it doesn't get the file. (Tested on Firefox 3.5.2, IE7, Chrome 2.0)
I don't think so. Images required for hover pseudo-class (mouseover) are loaded when you hover, and there can be a noticeable lag on the first appearence (unless you use a cheat to get it preloaded).
The browser will load what it needs to display a page. Although I can imagine various browsers could employ certain caching techniques and prefetch everything they see in a CSS file.
Your answer lies with firebug
No, a request for the image is made only when the class, or id is present on the page.
If you do want an image that's not visible on page load to "preload", then there are a variety of tricks you can use, such as displaying the image off screen on load. The most common case where "preloading" is necessary is in the case of background images that change on hover, where there would otherwise be an unacceptable lag the first time the user hovers and causes the image to change. The most common solution to this problem is called "CSS Sprites". You combine the default, hover, and (if present) active images into one file, one above the other, and you simply change the background image offset on :hover and :active.