Image preloaders and progress bar : Part 3

Till now we have seen how we can tackle with the images within the html code. But in most cases the number of images in CSS is much greater than the img tags within the html. Also we cannot use our normal element referring for css images. So we have to extract them ourself.



The logic :
First we grab all the css linked to the html document, merge them into one and then search for the images. The images are identified by their extension. So we use a regular expression to get the image url within background-image:Url('') property. We also have to extract all inline image urls using jquery. Next we merge both these lists of css and inline images and start preloading.

The Issues :
The first issue that come up when implementing this technique is the way in which the browser represents the url in css. For eg. Firefox uses a relative url (/images/xyz.jpg) where as chrome uses an absolute url (http://yoursite.com/images/xyz.jpg).
The second issue is the way in which css content is retrieved by browsers. In IE stylesheet content is retrieved by using StylesheetObject.cssRules.cssText whereas in other browsers it is retrieved using StylesheetObject.cssText.

The Code :

Still this code is not 100% compatible and will work only for css images that are referenced using url relative to the root (eg. /images/xyz.jpg). But i guess u must have got an idea of what i am trying to do. If you have any ideas please post them in comments.
This ends up the preloader tutorial. Have a nice day :)