Does EVERY image in a CSS file load when the file is loaded?

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);

CSS file is being loaded as Image

I included several CSS files in my website, other works good but one my CSS file (on localhost) : <link href=’http://127.0.0.1/ndf/nekib-css.css’ rel=’stylesheet’ type=’text/css’/> loads as an

gtk – Image not showing when loaded from file

I am a newbie at GTK+. I want to create a GUI with an Image with 2 buttons and a label below it. The image has to be loaded via a file dialog which is opened when I click a button called Load, but t

Load javascript file every time a new page is loaded

I’m using http://instantclick.io on my website (a pjax jquery plugin) and I’m experiencing some problems regarding javascripts. It’s very temperamental – sometimes a page will load with all the script

html does not load css file in some browsers

My html does not load the css style file. The preview povided by Eclipse correctly shows the changes I made in the css file. If I am loading the file with Firefox on the other hand these changes are g

How to know when a dynamically loaded CSS file is fully loaded and active?

I have used a technique described in a post on StackOverflow to dynamically add a CSS file to the HEAD tag of an HTML page (in JavaScript). The method to check whether the CSS file has been fully load

How to load audio file after image loaded in pivot items when pivot selection changed

Recently, I have tried to create application called Learn ABCD for windows phone platform. The main logic of this application is that initially I want to load all alphabetic character images like A

Load/refer css file inside a javascript external file

How can I load/refer to an external CSS file inside an external JS file. As shown in the below image I would like to refer/load Default.css inside Common.js Thanks in advance BB

External file (image, css, js) can not loaded in Struts

I want to ask why my external css/js was not load in my jsp. My struts.xml content : <?xml version=1.0 encoding=UTF-8 ?> <!DOCTYPE struts PUBLIC -//Apache Software Foundation//DTD Struts

Right CSS file not loaded, another somewhere else’s loaded

I have a little problem with my website. My CSS file located in css/style.css who is empty doesn’t load when in my index.php located in public_html on cPanel loads. I’m using a link that I’ve put: lin

NullPointerException when using path name to load image file

Looked everywhere and still can’t find a solution to this problem while using NetBeans. When I use the following code to load a file by path: Image owl = new ImageIcon(this.getClass().getResource(/i

Answers

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.

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)

Your answer lies with firebug

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).

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.