Update: A New & Improved jQuery Script to Automatically Preload images from CSS

Posted by Scott on 06/04/2008

10/31/08 Update: Many updates to performance, error handling, and browser bugs. Thanks Trixta!
7/24/08 Update: Fixed support for Opera and @import CSS (thanks http://marcarea.com/).
6/21/08 Update: This script is now updated with optional settings for load status, including a percentage bar! We also included a bug fix for IE when loading absolute image paths (Thanks Sam Pohlenz!). Details are below.

When we first launched the lab, we released a jQuery plugin that automatically preloads all images referenced in CSS files. We’ve found the script to be incredibly helpful in developing snappy applications where images are always ready when we need them. This post describes a significant update to the script which will make it even easier to integrate in existing projects.

The concept behind this script

If you’re interested in reading about how and why we developed this script, please read our original article. Keep in mind that this update provides a new version of the code which is highly recommended over the first version.

New version improvements

Among other small improvements, this release allows preloading images from any directory specified in the CSS. Also offers load status updates for text and image-based load bars.

Load images from anywhere; no arguments!

The first version of the script preloaded images from a single directory. Unfortunately, this limitation meant the script would not work well with web applications using images located in several directories or even other web sites entirely. This updated version loads images relative to their stylesheet’s url, allowing them to load no matter where they are located on the web. The new code is detailed below:

The source code

The source code for this plugin is available in a git repository, jQuery-Preload-CSS-Images.

How do I use it?

To use this plugin, be sure you’ve attached the jQuery javascript library and preloadCssImages.jQuery_v5.js to your page, and call $.preloadCssImages(); when the DOM is ready. Like this:

$(document).ready(function(){
  $.preloadCssImages();
});

This will parse though all of your attached CSS files and preload any images it finds referenced in them.

A quick demo

The example below uses our script to parse through a sample stylesheet which we’ve linked to the page. The sample stylesheet has background images specified for elements that don’t actually exist on the page, so the images specified are not currently loaded. Clicking the button below will load them into the DOM. For example purposes, we’ll write the loaded images into the page as well. The optional load status elements are shown upon load.

Demo page

For a simplified demo page that doesn’t use a visual preloader, view this page: http://www.filamentgroup.com/examples/preloadImages/index_v5b.html

Additional options

Displaying Load Progress

You can optionally pass element selectors to the plugin which will receive updates on the load status. These settings are specified as statusTextEl and statusBarEl. The values must be jQuery selector strings, for example: $.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});. To make a preload bar, cut a background image to the same width as your status bar element and assign it to the background of your element in CSS. Be sure to set its background-repeat to ‘no-repeat’. The script will handle the positioning.

Number of Simultaneous Requests Allowed

This feature was added by Trixta. The option simultaneousCacheLoading allows you to specify the number of simultaneous images to request at a time. It defaults to 2. If you plan to run this plugin while other assets are loading, you may want to set this option to 1, for browsers which can only handle 2 HTTP requests at a time.

Download jQuery-Preload-CSS-Images

This script is a jQuery plugin, meaning is is dependent on the incredible jQuery javascript library. If you feel particularly adventurous, this script could be easily ported to another library or written in plain old JavaScript as well. Feel free to grab the script and try it for yourself. We’re always looking for ways to improve our scripts, so if you think you can help on a particular issue, please submit a pull request and we’ll review it as soon as possible.

Comments

<div id="commentNumber1" class="commentEntry">
<p>Hi I dug your script and wanted to port it to Prototype.

So here it is: http://pastie.org/209498

</div>
	<p class="posted"><a href="#commentNumber1">Comment</a> by

JDD on 06/05  at  12:12 PM

<div id="commentNumber2" class="commentEntry fg">
<p>@JDD: Nice work. You’ve given us some ideas where we can optimize ours as well! Thanks.

</div>
	<p class="posted"><a href="#commentNumber2">Comment</a> by

Scott (Filament) on 06/05  at  05:47 PM

<div id="commentNumber3" class="commentEntry">
<p>This script appears to have a problem in IE, relating to the use of square brackets to get at a character index.

To fix, line 46 should be:
allImgs[k].src = (this.charAt(0) == ‘/’ || this.match(’http://’)) ? this : baseURL + this; //set src either absolute or rel to css dir

Otherwise, great plugin. Thanks!

</div>
	<p class="posted"><a href="#commentNumber3">Comment</a> by

Sam Pohlenz on 06/20  at  03:46 PM

<div id="commentNumber4" class="commentEntry fg">
<p>@Sam: Thanks for commenting. What version of IE are you seeing a problem in? We just tested the demo page in 6 and 7 and see no problems.

</div>
	<p class="posted"><a href="#commentNumber4">Comment</a> by

Scott (Filament) on 06/20  at  03:58 PM

<div id="commentNumber5" class="commentEntry">
<p>Scott, the demo page doesn’t trigger the issue as none of the URLs in the css begin with a forward slash.

Under IE 6 & 7 (at least on my machine), “mystring"[0] gives undefined, whereas “mystring”.charAt(0) gives the desired result of ‘m’.

The result is that presently under IE, any absolute css urls beginning with / will be fetched as if they were relative urls.

</div>
	<p class="posted"><a href="#commentNumber5">Comment</a> by

Sam Pohlenz on 06/20  at  04:24 PM

<div id="commentNumber6" class="commentEntry fg">
<p>Thanks Sam. It’s an interesting case that we’ll have to look into. I tried pasting in your charAt change real quick and it caused errors for me in FF and Safari. Not sure what would cause those but we’ll have to take a look at this next week and see. Thanks for following up though, we’ll let you know when we figure out a fix for your case.

</div>
	<p class="posted"><a href="#commentNumber6">Comment</a> by

Scott (Filament) on 06/20  at  05:43 PM

<div id="commentNumber7" class="commentEntry">
<p>Great work, this will really save a lot of time. Just concerned about IE issues though.

</div>
	<p class="posted"><a href="#commentNumber7">Comment</a> by

Abhimanyu Grover on 06/21  at  08:49 AM

<div id="commentNumber8" class="commentEntry fg">
<p><b>6/21/08 Update:</b> This script is now updated with optional settings for load status, including a percentage bar! We also included a bug fix for IE when loading absolute image paths (Thanks Sam Pohlenz!).

</div>
	<p class="posted"><a href="#commentNumber8">Comment</a> by

Scott (Filament) on 06/21  at  11:22 AM

<div id="commentNumber9" class="commentEntry">
<p>Just a few suggestions :

Check the media type of the stylesheet :

var mediaText = typeof sheets[ i ].media.mediaText !== ‘undefined’ ? sheets[ i ].media.mediaText : sheets[ i ].media;
if ( mediaText.indexOf(’screen’) ) {
continue;
}

And check @import rules for csshref:

if ( csshref == null ) {// consider @import rules
for ( var z=0; z<sheets[ i ].cssRules.length; z++) {
if ( sheets[ i ].cssRules[z].constructor == CSSImportRule ) {
csshref = sheets[ i ].cssRules[z].href;
}
}
}

Consider @import rules, somebody may write it better :)

if(sheets[ i ].cssRules){//w3
var thisSheetRules = sheets[ i ].cssRules; //w3
for(var j = 0; j<thisSheetRules.length; j++){
if ( sheets[ i ].cssRules[j].constructor == CSSImportRule ) {
var importSheetRules = sheets[ i ].cssRules[j].styleSheet.cssRules;
for ( var x=0; x<importSheetRules.length; x++ ) {
cssPile+= importSheetRules[x].cssText;
}
} else {
cssPile+= thisSheetRules[j].cssText;
}
}
}
else {
if ( sheets[ i ].imports.length > 0 ) {
for (var m=0; m<sheets[ i ].imports.length; m++) {
cssPile+= sheets[ i ].imports[m].cssText
}
} else {
cssPile+= sheets[ i ].cssText;
}
}

</div>
	<p class="posted"><a href="#commentNumber9">Comment</a> by

Marc on 06/21  at  11:40 AM

<div id="commentNumber10" class="commentEntry fg">
<p>@Marc: Great catch, thanks so much. We’ll add it in there ASAP!

</div>
	<p class="posted"><a href="#commentNumber10">Comment</a> by

Scott (Filament) on 06/21  at  11:50 AM

<div id="commentNumber11" class="commentEntry">
<p>Have you tested it with Opera? I’m using Opera 9.5 on XP SP3 and it doesn’t work. The image URLs are like this:

http://www.filamentgroup.com/examples/preloadImages/&#x22http://www.filamentgroup.com/examples/preloadImages/images/bg_header.jpg
instead of this:
http://www.filamentgroup.com/examples/preloadImages/images/bg_header.jpg
(which is what I get with Fx, IE and Safari)

</div>
	<p class="posted"><a href="#commentNumber11">Comment</a> by

Antonio Bueno on 06/23  at  05:35 AM

<div id="commentNumber12" class="commentEntry fg">
<p>@Antonio: Thanks, we’ll look into it. Looks like a regression in the last update.

</div>
	<p class="posted"><a href="#commentNumber12">Comment</a> by

Scott (Filament) on 06/23  at  08:34 AM

<div id="commentNumber13" class="commentEntry">
<p>and how do i use this with body onload?? i dont want users to have to click

</div>
	<p class="posted"><a href="#commentNumber13">Comment</a> by

Michal on 08/07  at  04:58 AM

<div id="commentNumber14" class="commentEntry fg">
<p>@Michal: You can refer to the section above “How do I use it?” for usage instructions, but basically, it’s a function that you can call whenever you’d like. The demo page runs on a click event because it’s easier to see what’s taking place that way.

To run it on dom ready:
$(function(){
$.preloadCssImages();
});

To run on body load:
$(’body’).load(function(){
$.preloadCssImages();
});

</div>
	<p class="posted"><a href="#commentNumber14">Comment</a> by

Scott (Filament) on 08/07  at  08:29 AM

<div id="commentNumber15" class="commentEntry">
<p>Hi Scott,

very nice script. i needed something like this, but i had some problems with multiple css-files in different folders. so i fixed some bugs and improved style-parsing performance.

here you can find the script with a nice demo:
http://www.protofunc.com/scripts/jquery/cssImagePreload/

</div>
	<p class="posted"><a href="#commentNumber15">Comment</a> by

alexander on 08/09  at  01:22 PM

<div id="commentNumber16" class="commentEntry">
<p>Receive “access is denied” on line 58.

cssPile+= sheets[ i ].cssText;

Could this be cause by a cross-domain issue?

</div>
	<p class="posted"><a href="#commentNumber16">Comment</a> by

Rick on 08/20  at  01:34 PM

<div id="commentNumber17" class="commentEntry">
<p>Hi there, lovely plugin, only thing is, it doesnt seem to work with using fadein, I can see in statustext that its loaded, but on mouseover event, I can see firefox3 still loading the image - causing a flicker with rollover effect.

Any suggestions to why this is happening ?

Kind regards

zenmaster

</div>
	<p class="posted"><a href="#commentNumber17">Comment</a> by

Zenmaster on 08/24  at  04:41 AM

<div id="commentNumber18" class="commentEntry">
<p>Hi there- I’m excited to try this out. Would you be able to say more specifically where you put the call to the script? In the head, the body, the bottom? I know you say “when the dom is ready” but I’m still getting my head around all this DOM stuff. Thanks!

</div>
	<p class="posted"><a href="#commentNumber18">Comment</a> by

Terrence on 09/04  at  01:41 PM

<div id="commentNumber19" class="commentEntry fg">
<p>@Terrence: jQuery has a custom event that allows you to run code as soon as the DOM is ready (the elements are there but images aren’t yet loaded). You can use it like this:

$(document).ready(function(){
//put your DOM-related scripting here
});

</div>
	<p class="posted"><a href="#commentNumber19">Comment</a> by

Scott (Filament) on 09/04  at  01:48 PM

<div id="commentNumber20" class="commentEntry">
<p>Hi,

Firebug gives the following error:

Security error” code: “1000
if(document.styleSheets[i].cssRules){//w3

I get this error when I access my website using http://www.raihaniqbal.net which basically points to http://www.raihaniqbal.org. But it works when I use the latter url.

Any idea?

</div>
	<p class="posted"><a href="#commentNumber20">Comment</a> by

Raihan on 09/17  at  12:46 AM

<div id="commentNumber21" class="commentEntry">
<p>There’s a bug in your script, on or about line 40:

if ( sheets[i].cssRules[j].constructor == ‘CSSImportRule’ ) { //added support for @imported css - credit: http://marcarea.com/

should read instead:

if ( sheets[i].cssRules[j].constructor == CSSImportRule ) { //added support for @imported css - credit: http://marcarea.com/

Note the absence of quotes around CSSImportRule. The equivalence operation for the constructor needs to be made against an object, not a string.

</div>
	<p class="posted"><a href="#commentNumber21">Comment</a> by

Daniel Wright on 09/17  at  01:55 PM

<div id="commentNumber22" class="commentEntry">
<p>@Daniel

This and some other bugs are fixed in this version:
http://www.protofunc.com/scripts/jquery/cssImagePreload/

I hope there will be an new bugfix and CPU- + http-performance release by Scott.

</div>
	<p class="posted"><a href="#commentNumber22">Comment</a> by

alex on 09/18  at  05:47 PM

<div id="commentNumber23" class="commentEntry">
<p>“Paste the code above into your JavaScript file and run $.preloadCssImages(); when the DOM is ready.”

I’m with Terrence here. I can’t figure out how to actually use this. Your demo includes a button to click, which is I guess useful in some way, but it doesn’t really apply to a web page. I don’t want to have anyone click anything, I just want the css images to load silently. Once I have included the plugin & jquery scripts in the head, where exactly do I add code to a page to preload images?

Please talk to me like I’m pretty much an idiot regarding scripting, because I am!

</div>
	<p class="posted"><a href="#commentNumber23">Comment</a> by

AdrienneA on 10/21  at  05:46 PM

<div id="commentNumber24" class="commentEntry">
<p>I *think* that what they mean is

1. Have a javascript file that is included in the <head> of your html page, where the code is kept.
2. In order to get the code to actually run, you have to wait for the dom to be ready… that means, wait until the entire page has loaded. The DOM is a way of visualizing the HTML structure of the page - <body> is a parent of <h2>, <li> is a child of <ul>, etc. And the way that jquery works is to go through the whole DOM structure (i.e. your HTML) and find exactly the right spot where it is supposed to DO SOMETHING. That SOMETHING is the javascript code that you included in your head. Finding WHERE to do that something is figured out by the $.preloadCssImages();, and so you can only do that command AFTER the entire page has loaded. You run that command by saying $.preloadCssImages();… again, this comes after the dom is created, so right at the end, before the </body> tag.

Anyone out there - I am still very new myself, so please correct me if I am wrong. (as I know you will)

</div>
	<p class="posted"><a href="#commentNumber24">Comment</a> by

Terrence on 10/21  at  06:00 PM

<div id="commentNumber25" class="commentEntry fg">
<p>@AdrienneA: Sorry for the confusion, and thank you Terrence for helping to answer the question! The demo is just there to illustrate images being loaded in from the stylesheet, which in reality is something the user would probably not see and would not have to initialize through a click, so I can see how it could be misleading.

Here’s the basic gist of using this script:
First of all, this script relies on jQuery, so if you don’t already have jQuery attached to your page, you’ll need to download it from jQuery.com or link to the google version of it here: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

Once you’ve attached jQuery and our script to your page, you can preload your CSS images by calling $.preloadCssImages();. As Terrence pointed out though, this won’t work properly unless the HTML on your page has finished loading. Fortunately, jQuery has an event which lets you run code when your HTML finishes loading, and it looks like this:

$(document).ready();

To use this, just pass a function into the ready event and put all your DOM-related jQuery code inside it. Like this:

$(document).ready(function(){
//DOM-related jQuery code goes here
});

Anything inside that ready event will execute when the page is ready to be manipulated, and that’s where you’ll put your call to preloadCSSImages as well. So here it is, in full:

$(document).ready(function(){
$.preloadCssImages();
});

Let me know if that clarifies things for you.

</div>
	<p class="posted"><a href="#commentNumber25">Comment</a> by

Scott (Filament) on 10/22  at  09:08 AM

<div id="commentNumber26" class="commentEntry fg">
<p>Here is a demo page that uses preloadCSSImages in its most basic configuration. Hopefully, this will clear up the confusion around how to use this plugin, as it really is quite simple to implement.

View the source of this page:
http://www.filamentgroup.com/examples/preloadImages/index_v4b.html

We will update the article soon with better usage instructions.
Thanks!

</div>
	<p class="posted"><a href="#commentNumber26">Comment</a> by

Scott (Filament) on 10/22  at  09:40 AM

<div id="commentNumber27" class="commentEntry">
<p>Thanks, Scott and Terrence. I’ll give it a whirl!

</div>
	<p class="posted"><a href="#commentNumber27">Comment</a> by

AdrienneA on 10/22  at  07:39 PM

<div id="commentNumber28" class="commentEntry">
<p>Thanks for your detailed instructions. This plugin is great! I recently made a site with CSS rollovers, but had big images so there was quite a lag for the rollovers to appear.&nbsp; Now they really snap up. Take a look if you’d like:

jainabee.com

IE doesn’t load the images quite as nicely as FF, but there you go :-(

Overall the script really improves the page’s performance. Thanks!

</div>
	<p class="posted"><a href="#commentNumber28">Comment</a> by

AdrienneA on 10/23  at  06:31 PM

<div id="commentNumber29" class="commentEntry">
<p>OK!! So I’ve read all the comments, articles, and got everything installed.&nbsp; But as a novice I have a question:&nbsp; In your original version, you had to refer to a directory where the stylesheets (o r image directories?) were located.&nbsp; My directories are as follows:

/img/.......

/src/css/......

Also I have multiple directories in /img/ to organize my images in different folders.

Does this latest version automatically find everything?  or do I need to specify where everything is?  I’m confused…

Are we looking for stylesheets or the image directories?

Also, I placed the following script in the index page, but do I need to place this script in every page I create?

$(document).ready(function(){
$.preloadCssImages();
});

Is it that easy?  Download “jquery-1.2.6.min.js” and “preloadCssImages.jQuery_v4.js” and place the “$.preloadCssImages();” in the index page?  I’m done?

Sorry for so many questions....

Erik

</div>
	<p class="posted"><a href="#commentNumber29">Comment</a> by

Erik on 10/28  at  08:01 PM

<div id="commentNumber30" class="commentEntry">
<p>Is there a problem running mootools scripts along with jQuery?&nbsp; My mootools fx.slide script would not work unless I placed all the jQuery scripts ABOVE the mootools scripts in the &lt;head&gt; section.

<link rel="shortcut icon” type="image/ico" href="/img/icon/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/src/css/main.css" title="default" />

$(document).ready(function(){
$.preloadCssImages();
});

</head>

</div>
	<p class="posted"><a href="#commentNumber30">Comment</a> by

Erik on 10/28  at  08:26 PM

<div id="commentNumber31" class="commentEntry fg">
<p>@Erik: as for image paths, it’ll figure that stuff out on its own. The only options it accepts are for showing a visible progress indicator, which is not something most people will need with this script. Just put that function call somewhere in your javascript, whether it’s attached through an external JS file, or in the head of your page. It’ll do the rest for you.

As for mootools, you should check out the jQuery site for info about using jQuery site with other javascript libraries. Also, grab the latest source file above, as it avoids use of the $ variable, using “jQuery” instead. Which will also help with this.

</div>
	<p class="posted"><a href="#commentNumber31">Comment</a> by

Scott (Filament) on 10/31  at  12:51 PM

<div id="commentNumber32" class="commentEntry fg">
<p>@everyone: As noted by @alexander above, he contributed a major bug fix to this script, and we’ve updated our source with his changes.

Notable improvements include:
- better browser support (bug fixes in IE and Opera)
- Major performance improvements, runs much much faster!
- New option to limit the number of simultaneous HTTP requests.
- Error handling
- overall code organization and cleanup

Thanks a lot @alexander! Please drop us a URL so we can credit your work properly!

</div>
	<p class="posted"><a href="#commentNumber32">Comment</a> by

Scott (Filament) on 10/31  at  03:50 PM

<div id="commentNumber33" class="commentEntry">
<p>Thanks for the response, but I have one more question:&nbsp; I cannot resolve the conflict between mootools and jquery.

Do I need to call this script on every page?

Is it possible redirect after the script is loaded?

Erik

</div>
	<p class="posted"><a href="#commentNumber33">Comment</a> by

Erik on 10/31  at  04:23 PM

<div id="commentNumber34" class="commentEntry">
<p>@Erik

jQuery has a special format for other javascript libraries conflicting with it. It’s documented at
http://docs.jquery.com/Using_jQuery_with_Other_Libraries.

Instead of using:

$(document).ready(function(){
$.preloadCssImages();
});

You replace all of the $ instances:

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery.preloadCssImages();
});

And there is the option to shorthand type it as well:

var $j = jQuery;
$j(document).ready(function(){
$j.preloadCssImages();
});

I can’t possibly test to see if this works on your script, but give it a go :)

</div>
	<p class="posted"><a href="#commentNumber34">Comment</a> by

Jarryd on 11/12  at  07:35 PM

<div id="commentNumber35" class="commentEntry">
<p>Now you need to take a page from Google Web Tool Kit and BUNDLE those images into one file, to make it download fast, and then break them back out to the original files in the browser cache.

</div>
	<p class="posted"><a href="#commentNumber35">Comment</a> by

Ken G on 11/13  at  08:34 AM

<div id="commentNumber36" class="commentEntry">
<p>Nice script, it works like a charme for me. But I have a question: How can I display the progress bar while loading the images and make it disappear after loading is complete (perhaps like the Lightbox-style by making the screen dark and focus on the progress bar at the center)? Because for me it makes no sense to display the progress bar all the time even when loading has completed. Unfortunately I am not a js-expert and don’t know how to realize this, so I would appreciate any help!

Kind regards,
Olli

</div>
	<p class="posted"><a href="#commentNumber36">Comment</a> by

Olli on 11/18  at  02:52 PM

<div id="commentNumber37" class="commentEntry">
<p>Is there a cross-domain issue with parsing the CSS files? I get this error: Security error” code: “1000

if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){

Our CSS and JS files are served from a separate server that lives on another domain…

</div>
	<p class="posted"><a href="#commentNumber37">Comment</a> by

Fontaine on 11/19  at  12:51 AM

<div id="commentNumber38" class="commentEntry">
<p>Hoi ik ben het helemaal mee eens <a href="http://www.wereldvanproducten.com" rel="nofollow">http://www.wereldvanproducten.com</a>

</div>
	<p class="posted"><a href="#commentNumber38">Comment</a> by

Joshared on 11/23  at  08:40 AM

<div id="commentNumber39" class="commentEntry">
<p>@Olli

I want to perform the same kind of task of you, since I’m loading a large background image and don’t want the user to see the page whilst this is loading. Have you managed to figure out a way to do this? Perhaps there is some kind of event that JQuery triggers when all of the images are loaded?

@Scott
Great plug-in! Only just got into JQuery in the past couple of days really impressed by it, especially the plug-ins. Please keep up the good work!

</div>
	<p class="posted"><a href="#commentNumber39">Comment</a> by

Richard on 11/25  at  05:40 AM

<div id="commentNumber40" class="commentEntry">
<p>@Olli

After a little research, I think that just firing this event, which is triggered once all of the images have loaded, should do what you’re after:

$(window).load(function () {
$(’#loadInfo’).fadeOut(’slow’);
});

That also makes the loading window fadeout, which just means it’s now a matter of changing the CSS.

Cheers,
Richard

</div>
	<p class="posted"><a href="#commentNumber40">Comment</a> by

Richard on 11/25  at  07:21 AM

<div id="commentNumber41" class="commentEntry">
<p>Hi!

The script doesn’t work via HTTPS. This should be quite easily fixable, from what I can see.

Regards,
Jaka

</div>
	<p class="posted"><a href="#commentNumber41">Comment</a> by

Jaka Jancar on 11/25  at  08:17 PM

<div id="commentNumber42" class="commentEntry">
<p>Thanks for the great script!

</div>
	<p class="posted"><a href="#commentNumber42">Comment</a> by

anon on 11/28  at  08:22 AM

<div id="commentNumber43" class="commentEntry">
<p>First of all, thank you for this wonderful tool. I wanted to find out if it is possible to have this script also preload images found in “img” tags in your XHTML?

Thank you again.

</div>
	<p class="posted"><a href="#commentNumber43">Comment</a> by

dangdang on 12/06  at  10:32 AM

<div id="commentNumber44" class="commentEntry">
<p>I’ve got it downloaded. Thanks.

</div>
	<p class="posted"><a href="#commentNumber44">Comment</a> by

Rahul on 12/10  at  12:29 PM

<div id="commentNumber45" class="commentEntry">
<p>I have use it on my site (<a href="http://wpesp.com" rel="nofollow" title="WPESP - WordPress Themes">wpesp.com</a>). Thanks!!

</div>
	<p class="posted"><a href="#commentNumber45">Comment</a> by

Víctor on 12/17  at  05:10 AM

<div id="commentNumber46" class="commentEntry">
<p>This is a wonderful idea. Many thanks for developing this and making it available. I’ve tried using this on our site—which has heavy css bkg img usage. However, I’m seeing a pretty big performance hit in that the images don’t appear to get cached, i.e., each page seems to reload all of the images from scratch rather than checking to see if they’ve already been loaded into the browser. Is there a workaround for this or is my browser (FF3) not behaving?

</div>
	<p class="posted"><a href="#commentNumber46">Comment</a> by

Brian on 12/24  at  01:40 PM

<div id="commentNumber47" class="commentEntry">
<p>Ok, here is my problem - I like the first version where I could pass a directory to the preloader. I need to use this script in conjunction with an Expression Engine site in order to preload content in the dynamically created galleries, and loading the contents of a folder is really the only way to do that task. Is there any way to add this feature back in to the current version? Thanks for a great tool!

Jason

</div>
	<p class="posted"><a href="#commentNumber47">Comment</a> by

Jason L on 12/25  at  02:41 AM

<div id="commentNumber48" class="commentEntry">
<p>In Firebug (FF 3.0.5) I am receiving the following error:

A parameter or an operation is not supported by the underlying object” code: “15
http://www.mydomain.com/js/preloadCssImages.jQuery_v5.js
Line 88

It is also interfering with some jQuery AJAX stuff - when I remove your plug-in and function call these problems disappear.

Cheers.

</div>
	<p class="posted"><a href="#commentNumber48">Comment</a> by

Jez on 01/11  at  11:52 AM

<div id="commentNumber49" class="commentEntry">
<p>Security error”  code: “1000

at Line 37

if(sheets.cssRules){//w3

</i></div><i>
	<p class="posted"><a href="#commentNumber49">Comment</a> by

feroz on 01/18  at  11:51 PM

<div id="commentNumber50" class="commentEntry fg">
<p>For those mentioning security errors in Firebug, please check if the error occurs on a web URL. We can only replicate this issue when running locally.

</div>
	<p class="posted"><a href="#commentNumber50">Comment</a> by

Scott (Filament) on 01/19  at  12:47 PM

<div id="commentNumber51" class="commentEntry fg">
<p>If you’re looking to preload content images (HTML img elements), you don’t need this plugin. You can do that easily in regular javascript by creating an array of your image file paths and iterating through them to create new image objects. Something like…

var myImages = [ ‘a.jpg’, ‘b.gif’, ‘c.png’];

for(var i=0; i<myImages.length; i++){
var img = new Image();
img.src = myImages;
};

</i></div><i>
	<p class="posted"><a href="#commentNumber51">Comment</a> by

Scott (Filament) on 01/19  at  12:56 PM

<div id="commentNumber52" class="commentEntry">
<p>Great idea, and nice script!

May I make just a couple suggestions for your next release?

1. In line 107, the RegExp should also account for single-quote characters, which are valid CSS quote characters.  Also, you do not need to escape the “(” within the RegExp.  Finally, if you’d like, you can add a simple look-ahead to be sure you’re really a the end of a legitimate image file name. So the final RegExp would be:  /[^(“‘]+\.(gif|jpg|jpeg|png)(?=\W)/g The (?=\W) can be removed if you don’t want the look-ahead, but I doubt it would add more than a millisecond to the execution speed.

2. You may want to consider changing cssPile to an array (instead of a string), and using a join in line 107 like so:

var tmpImage = cssPile.join("").match(…

That should improve execution speed in IE6 and IE7 for CSS files with a lot of images.

-Todd

</div>
	<p class="posted"><a href="#commentNumber52">Comment</a> by

Speednet on 01/28  at  11:49 AM

<div id="commentNumber53" class="commentEntry">
<p>I get the same error as Jez…

A parameter or an operation is not supported by the underlying object” code: “15
http://www.mydomain.com/js/preloadCssImages.jQuery_v5.js
Line 88

It sadly renders the script useless. I am sure it si a small problem, but I am too deep into a deadline to look for it right now (sorry!).

</div>
	<p class="posted"><a href="#commentNumber53">Comment</a> by

Soulhuntre on 01/30  at  01:16 PM

<div id="commentNumber54" class="commentEntry">
<p>Apologies for not getting back sooner. I can confirm that the Firebug error also happens on a web URL. I have disabled the plug-in, but if you want to see the site for any reason it is at <a href="http://www.quoteseek.info" rel="nofollow">http://www.quoteseek.info</a>

</div>
	<p class="posted"><a href="#commentNumber54">Comment</a> by

Jez on 01/30  at  03:17 PM

<div id="commentNumber55" class="commentEntry">
<p>No worries Jez, it’s all cool.

I had to disable it as well.. I will probably wind up collecting all the image paths and doing a manual preload since this script is fragile. Too bad, cause it really is a great tool when it works!

Ken

</div>
	<p class="posted"><a href="#commentNumber55">Comment</a> by

Soulhuntre on 01/30  at  03:22 PM

<div id="commentNumber56" class="commentEntry">
<p>I got also the “A parameter or an operation is not supported by the underlying object” code: “15

http://www.mydomain.com/js/preloadCssImages.jQuery_v5.js
Line 88 “ error in firebug. After searching a while I found this site: http://code.google.com/p/slideshow/wiki/FAQ#Why_won&#x27;t_Slideshow_work_with_Google_Maps?
There they have exactly the same error, the solution they got is placing the css file before the javascript file.

I tried this solution and it works for me! I simply placed the link to my css file before including the js files and I no longer see any errors.

</div>
	<p class="posted"><a href="#commentNumber56">Comment</a> by

Niels on 01/30  at  06:03 PM

<div id="commentNumber57" class="commentEntry fg">
<p>Thanks Niels!

If everyone who was having issues could test that out, we’d appreciate knowing if that was the culprit.

Out of curiosity, are those who see this problem using jQuery 1.3? This may have been introduced now that jQuery no longer guarantees all CSS is loaded at domready. I’ll have to check on that.

In general, it’s probably a good idea to have your css linked before jQuery anyway, since you’ll want to try to get your CSS loaded before trying to get element dimensions, etc.

</div>
	<p class="posted"><a href="#commentNumber57">Comment</a> by

Scott (Filament) on 01/30  at  06:24 PM

<div id="commentNumber58" class="commentEntry">
<p>Excellent, thanks a lot Niels - everything working OK now (and obviously thanks to Scott for the plug-in). Using 1.2.6. here.

</div>
	<p class="posted"><a href="#commentNumber58">Comment</a> by

Jez on 01/30  at  06:46 PM

<div id="commentNumber59" class="commentEntry">
<p>Unfortunately, that didn’t fix the problem here. My CSS is loaded above my Jquery :(

Yes, I am running 1.3, and cannot regress to 1.2.6 for my project… however that DOES sound like it is a similar problem - it clearly seems like the CSS is not loaded by the time you guys get called. That would thus be the same problem as an ordering issue.

I wonder how I could force that?

</div>
	<p class="posted"><a href="#commentNumber59">Comment</a> by

Soulhuntre on 01/30  at  07:53 PM

<div id="commentNumber60" class="commentEntry fg">
<p>@ Soulhuntre: try running this plugin onload instead of at domready.

$(window).load(function () {
$.preloadCssImages();
});

</div>
	<p class="posted"><a href="#commentNumber60">Comment</a> by

Scott (Filament) on 01/30  at  08:16 PM

<div id="commentNumber61" class="commentEntry">
<p>Following the logic, I tried this in my ready function… ignore the try / catch as that was to guard against the error, but I wanted to see it this time. What I am doing is hoping to wait till AFTER the page loads to start caching.

$(window).load(function () {
$.preloadCssImages();
/* try { $.preloadCssImages(); } catch(e) {} */
});

Now I get a different error…

The firebug error is..

Security error” code: “1000
[Break on this error] if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){

The raw error from the error console is..

Error: [Exception… “Security error” code: “1000” nsresult: “0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)” location: “http://localhost:38754/example/support/js/preloadCssImages.jQuery_v5.js Line: 88"]
Source File: http://localhost:38754/example/support/js/preloadCssImages.jQuery_v5.js
Line: 88

</div>
	<p class="posted"><a href="#commentNumber61">Comment</a> by

Soulhuntre on 01/30  at  08:18 PM

<div id="commentNumber62" class="commentEntry">
<p>Doesn’t this support URLS? for example,

files.blah.com/css/blah.css

because I tried it and it doesn’t work but when I do,

files/css/blah.css it works fine, is it a bug?

</div>
	<p class="posted"><a href="#commentNumber62">Comment</a> by

jono on 01/31  at  07:35 PM

<div id="commentNumber63" class="commentEntry">
<p>Unfortunately, it looks like this bug will disqualify this plugin from use in our project :(

Thanks for all the effort that went into it and I hope eventually it gets fixed because it is a much needed tool!

</div>
	<p class="posted"><a href="#commentNumber63">Comment</a> by

Soulhuntre on 02/04  at  03:48 AM

<div id="commentNumber64" class="commentEntry">
<p>The “simplified demo” URL returns Page Not Found.

</div>
	<p class="posted"><a href="#commentNumber64">Comment</a> by

Adrian B on 02/04  at  09:06 AM

<div id="commentNumber65" class="commentEntry">
<p>Thanks for this script . Very Usefull

</div>
	<p class="posted"><a href="#commentNumber65">Comment</a> by

Michael on 02/05  at  04:30 PM

<div id="commentNumber66" class="commentEntry">
<p>The script is just great! Congrats! It’s inspiring to see all of your hard work. I have bookmarked your website.

Regards, Paul

</div>
	<p class="posted"><a href="#commentNumber66">Comment</a> by

Inchirieri masini on 02/09  at  07:34 PM

<div id="commentNumber67" class="commentEntry">
<p>Any ideas for jQuery 1.3.1?

I tried to preload in $(window).load with no luck:

Security error” code: “1000
[Break on this error] if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){

</div>
	<p class="posted"><a href="#commentNumber67">Comment</a> by

gustin on 02/10  at  07:52 PM

<div id="commentNumber68" class="commentEntry">
<p>@gustin - Sorry, I don’t have any ideas on it :(

Unfortunately, this project looks like it is essentially abandoned so you might not find an answer.

Ken

</div>
	<p class="posted"><a href="#commentNumber68">Comment</a> by

Soulhuntre on 02/10  at  10:08 PM

<div id="commentNumber69" class="commentEntry fg">
<p>Just to clarify, this project is definitely not abandoned - it works quite well in most situations we’ve come across. We just haven’t come up with a fix yet for the cases mentioned above, but we’re giving it some thought.

Once we find a fix, we’ll post an update.

We welcome any ideas that anyone might have in the meantime. Thanks!

</div>
	<p class="posted"><a href="#commentNumber69">Comment</a> by

Scott (Filament) on 02/11  at  04:40 PM

<div id="commentNumber70" class="commentEntry">
<p>Hello. A found your script very usefull, but I need a Callback function for it. Are U going to add such func?

Regards,
UdarEC

</div>
	<p class="posted"><a href="#commentNumber70">Comment</a> by

UdarEC on 02/20  at  02:06 PM

<div id="commentNumber71" class="commentEntry">
<p>Hi guys,

Brilliant idea! I’ve tried using your script on one of our clients websites (http://www.studiomoso.com.au/designs/prs/), and I am using Safari in order to test dependencies in the activity window.

The website uses large background images on each section, hence your script is exactly what we need. After loading your script on the homepage to load all background images within the site (via css). I have found that those same background images are loaded again once when those pages are viewed. I was under the assumption that once your script ran through the css it would cache any images found within the css. Have i implemented your script incorrectly?

Any advice would be much appreciated.

cheers,
Ritch

</div>
	<p class="posted"><a href="#commentNumber71">Comment</a> by

Ritchie Anesco on 02/26  at  12:54 AM

<div id="commentNumber72" class="commentEntry">
<p>Would you mind posting the HTML for using this script with the progress bar/percentage progress? Also, could you demonstrate how to automatically redirect once the preloading has completed?

</div>
	<p class="posted"><a href="#commentNumber72">Comment</a> by

Will on 03/11  at  01:46 AM

<div id="commentNumber73" class="commentEntry">
<p>I have the same problems that Ritch is having. Even though all the images do get preloaded by the script  they get loaded again when they are  “activated”. I’m doing different images as  a rollover effect for a menu and when I mouse over the link the image is loaded again even though it’s  already been preloaded.

Kindly, Marcus.

</div>
	<p class="posted"><a href="#commentNumber73">Comment</a> by

Marcus Dalgren on 03/17  at  05:21 AM

<div id="commentNumber74" class="commentEntry">
<p>i’m getting the same - Receive “access is denied” on line 58

Any ideea why ? TKs

</div>
	<p class="posted"><a href="#commentNumber74">Comment</a> by

Inchirieri masini on 03/18  at  06:18 AM

<div id="commentNumber75" class="commentEntry">
<p>I came across this script and am planning on using it for a client’s site. I’ve read some of the comments and was hoping you could post a list of the current bugs.

Thanks again

</div>
	<p class="posted"><a href="#commentNumber75">Comment</a> by

Andre on 03/19  at  07:20 PM

<div id="commentNumber76" class="commentEntry">
<p>help

</div>
	<p class="posted"><a href="#commentNumber76">Comment</a> by

sanju on 03/27  at  09:33 AM

<div id="commentNumber77" class="commentEntry">
<p>while parsing the CSS files I get this error: Security error” code: “1000

if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){

I have notice another guy with the same problem.

Any idea why ?

</div>
	<p class="posted"><a href="#commentNumber77">Comment</a> by

Farmacii on 03/30  at  02:48 AM

<div id="commentNumber78" class="commentEntry fg">
<p>To those asking about the security error sometimes seen when using this script: can you confirm that it exists when running on a web server? So far, we’ve only seen this in Firefox with local file:// urls.

</div>
	<p class="posted"><a href="#commentNumber78">Comment</a> by

Scott (Filament) on 04/01  at  11:11 AM

<div id="commentNumber79" class="commentEntry">
<p>Super script! 10x!

</div>
	<p class="posted"><a href="#commentNumber79">Comment</a> by

Tavy on 04/03  at  03:34 AM

<div id="commentNumber80" class="commentEntry">
<p>I came accross this article searching on google how to preload images using jQuery. This article describes how to preload css images. But if you need to <a href="http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html" rel="nofollow">preaload normal images using jQuery read this detailed article</a>.

</div>
	<p class="posted"><a href="#commentNumber80">Comment</a> by

JQuery Howto on 04/06  at  08:33 AM

<div id="commentNumber81" class="commentEntry">
<p>$(document).ready(function(){

$.preloadCssImages();
});

has anyone tried manipulating this code

</div>
	<p class="posted"><a href="#commentNumber81">Comment</a> by

loan modification on 04/14  at  10:23 PM

<div id="commentNumber82" class="commentEntry">
<p>How can I call a function AFTER all of the images are pre-loaded?

Like a callback function?? I think thats what I need

</div>
	<p class="posted"><a href="#commentNumber82">Comment</a> by

brainfog0 on 04/21  at  11:14 AM

<div id="commentNumber83" class="commentEntry">
<p>Wow, indeed a great script. I think that this idea of preloading everything in the CSS is brilliant since you can have a plain text document for spiders, and a fully functional site for users.

</div>
	<p class="posted"><a href="#commentNumber83">Comment</a> by

Inchirieri Masini on 04/24  at  03:58 PM

<div id="commentNumber84" class="commentEntry">
<p>This solution works for all browsers EXCEPT IE7 (I assume I can include IE6 and 8 though I have not tested in them). I am getting an error upon logging in to the app I developed:

Microsoft JScript runtime error: ‘jQuery’ is undefined

How can this be fixed?

The environment I am developing in is ASP.net 3.5 with VB, if that helps to clarify things. I thought I noticed that this site which I am posting this on is PHP. If so that might be the issue at which point I will abandon this code now and find something more suitable. No offense, because this actually is effective in PC browser’s Safari, FF and Opera. Just not in confounded IE.

</div>
	<p class="posted"><a href="#commentNumber84">Comment</a> by

jon on 04/27  at  03:39 PM

<div id="commentNumber85" class="commentEntry fg">
<p>@jon: Hmm… I know we tested this script on IE6 and 7 before posting. Can you confirm our demos show this error for you as well? It sounds like a problem with IE getting your jQuery file properly loaded. I’m just guessing, but perhaps the content-type of your jQuery library file isn’t properly defined as “text/javascript\” for IE..?

</div>
	<p class="posted"><a href="#commentNumber85">Comment</a> by

Scott (Filament) on 04/27  at  03:51 PM

<div id="commentNumber86" class="commentEntry">
<p>If you send contact me via email I could send a screenshot of the error which is happeninig in Visual Studio. It happens each time I click a link, but it still goes to another page and continues if I choose to “continue”. Either way I am leaving work and will be back here tomorrow to check in. Have a good one.

</div>
	<p class="posted"><a href="#commentNumber86">Comment</a> by

jon on 04/27  at  04:17 PM

<div id="commentNumber87" class="commentEntry">
<p>I can confirm “security error: 1000” on a web server. bummer.

</div>
	<p class="posted"><a href="#commentNumber87">Comment</a> by

rene on 05/08  at  03:19 AM

<div id="commentNumber88" class="commentEntry">
<p>btw (see my comment above): this happens on IE8/Vista, FF3/Vista and there are other jQuery plugins loaded (scrollto and supersleight) that work flawlessly. These are not the cause for this error, I’ve already tried without them. Result’s the same.

</div>
	<p class="posted"><a href="#commentNumber88">Comment</a> by

rene on 05/08  at  03:48 AM

<div id="commentNumber89" class="commentEntry">
<p>Hi, i am interested in using this script, but for a blog, just i don´t understand where especify the url of my images, and how to put in the body onLoad, because the blog works different that html, and i don´t know so much java, if anyone could help me, i would be very grateful, see you…

</div>
	<p class="posted"><a href="#commentNumber89">Comment</a> by

proteo on 05/21  at  08:41 AM

<div id="commentNumber90" class="commentEntry">
<p>Hey guys,

To fix the ‘security error 1000’ issue, and probably other problems, do this:
Under this line:

var csshref = (sheets[sheetIndex].href) ? sheets[sheetIndex].href : ‘[removed].href’;

Put this:

if (csshref.match(/^https?:\/\//)) continue;

This will avoid the security error that comes up when JS tries to access a remote CSS file.

</div>
	<p class="posted"><a href="#commentNumber90">Comment</a> by

Adam LeVasseur-Arribas on 06/02  at  01:46 PM

<div id="commentNumber91" class="commentEntry">
<p>what if the specific page with preloading script does not use all the images referenced in CSS?.. they will be preloaded anyway, right?

</div>
	<p class="posted"><a href="#commentNumber91">Comment</a> by

bony on 06/18  at  03:48 PM

<div id="commentNumber92" class="commentEntry">
<p>have to try it first

</div>
	<p class="posted"><a href="#commentNumber92">Comment</a> by

inchirieri auto on 06/21  at  04:47 PM

<div id="commentNumber93" class="commentEntry">
<p>Hey, is there any way to know when the images are 100% done loading? A callback?

</div>
	<p class="posted"><a href="#commentNumber93">Comment</a> by

Jens on 06/25  at  04:56 AM

<div id="commentNumber94" class="commentEntry fg">
<p>@Jens: Yes, you can use the load event for that.

$(window).load(function () {
// run code
});

</div>
	<p class="posted"><a href="#commentNumber94">Comment</a> by

Scott (Filament) on 06/25  at  09:30 AM

<div id="commentNumber95" class="commentEntry">
<p>@Scott Thanks!

</div>
	<p class="posted"><a href="#commentNumber95">Comment</a> by

Jens on 06/25  at  09:44 AM

<div id="commentNumber96" class="commentEntry">
<p>Hi, here is my approach, this is not for preloading css images but hope it helps.

It was the only think that actually worked for me when using jquery-1.3.2 and carousel.js (http://interface.eyecon.ro/docs/carousel) that was failing in FF3 and Safari4 on both winxp and osx when the images where not fully loaded.


var imgnum = 0;
var imgldd = 0;
$(document).ready(function(){
imgnum = $(’#carousel img’).length;
$(’#carousel img’).load(function(){
imgldd++;
if(imgnum == imgldd){
$(’#cargando’).css(’visibility’, ‘hidden’);
$(’#carousel img’).css(’visibility’, ‘visible’);
$(’#carousel’).Carousel(
{
itemWidth: 160,
itemHeight: 110,
itemMinWidth: 160,
items: ‘a’,
reflections: 0,
rotationSpeed: 1.8
}
);
}
});
});
</div>
	<p class="posted"><a href="#commentNumber96">Comment</a> by

supermegapollo on 06/26  at  02:54 PM

<div id="commentNumber97" class="commentEntry">
<p>This doesn’t seem to be working for me. Firebug doesn’t output any errors… I wanted to get this working so I could swap out background images with jQuery. The swapping and everything works fine, its just not preloading my images. It says that it parses your css files, so I put this in my main css file:

background-image: url("../img/enginefeatures.jpg");
background-image: url("../img/monsterfeatures.jpg");
background-image: url("../img/racingfeatures.jpg");
background-image: url("../img/mixomfeatures.jpg");

The last one is the one that gets loaded of course, but the other 3 don’t preload. I did it like that, so that it could get the URLs from the css file only. If you can suggest a better way of doing it, that’d be great. I didn’t know if this was a bug though, since my urls all start with ../. Thanks.

</div>
	<p class="posted"><a href="#commentNumber97">Comment</a> by

Blake on 06/29  at  10:15 PM

<div id="commentNumber98" class="commentEntry">
<p>I’ve noticed this occasionally fails on Firefox 3.5 with the error log:

Error: uncaught exception: [Exception… “A parameter or an operation is not supported by the underlying object” code: “15” nsresult: “0x8053000f (NS_ERROR_DOM_INVALID_ACCESS_ERR)” location: “http://www.example.com/lib/includes/javascript/preloadcssimgs.js Line: 88"]

This seems to happen much more frequently with the minimized version (same message but line 7). Also seems to occur more frequently with more ‘distant’ servers; very infrequent with my local test server.

</div>
	<p class="posted"><a href="#commentNumber98">Comment</a> by

JAH on 07/03  at  05:56 AM

<div id="commentNumber99" class="commentEntry">
<p>same error on mozilla 3.5!!!

</div>
	<p class="posted"><a href="#commentNumber99">Comment</a> by

bijuterii on 07/08  at  04:29 PM

<div id="commentNumber100" class="commentEntry">
<p>Managed to fix the problem for myself by using:

$(window).load(function () {
$.preloadCssImages();
});

</div>
	<p class="posted"><a href="#commentNumber100">Comment</a> by

JAH on 07/09  at  03:11 AM

<div id="commentNumber101" class="commentEntry">
<p>The script is not working properly in Opera:

Version 9.64
Build 10487
Platform Win32
System Windows XP

Result from you example URL:
http://www.filamentgroup.com/examples/preloadImages/index_v2.html
-----
http://www.filamentgroup.com/examples/preloadImages/&#x22http://www.filamentgroup.com/examples/preloadImages/images/icon_product_wireless_lrg.png

</div>
	<p class="posted"><a href="#commentNumber101">Comment</a> by

Tomas J Stehlik on 07/14  at  10:31 AM

<div id="commentNumber102" class="commentEntry">
<p>Works like a charm, thanks for the plugin, Filament!&nbsp; Using it on a carbon calculator site for the city of Boston, hope to have it up in a few months.&nbsp; Check out the jQuery conference in September if you don’t already know about it: <a href="http://events.jquery.com/" rel="nofollow">http://events.jquery.com/</a>.

</div>
	<p class="posted"><a href="#commentNumber102">Comment</a> by

Taylor Kearns on 07/18  at  09:44 AM

<div id="commentNumber103" class="commentEntry">
<p>Taylor nice link. I think it was organized by the same people which set up the conference in  <a href="http://www.rentcar.ro/bucharest" rel="nofollow" title="rent a car bucharest">Bucharest</a> this year in january

</div>
	<p class="posted"><a href="#commentNumber103">Comment</a> by

Alesandra - Bucharest on 07/24  at  05:49 PM

<div id="commentNumber104" class="commentEntry">
<p>Hi there,

Great idea! I am going to try using your script on one of my oldest clients website, I hope it goes well.

</div>
	<p class="posted"><a href="#commentNumber104">Comment</a> by

Inchireiri de masini on 07/28  at  03:46 AM

<div id="commentNumber105" class="commentEntry">
<p>Please keep up the good work! Thanks for this ! Only just got into JQuery in the past couple of days really impressed by the plug-ins.

</div>
	<p class="posted"><a href="#commentNumber105">Comment</a> by

Jucarii on 07/28  at  04:04 PM

<div id="commentNumber106" class="commentEntry">
<p>First of all, thank you so much for your hard work on this, it seems like a great tool! Unfortunately, I’m a newb to both JavaScript and jQuery and I’m having trouble getting this to work for me. I have a page with some hidden content that is being placed into divs via JavaScript when someone clicks on a button. All of this content has corresponding background images that are set in CSS using IDs. Attached to me HTML file are my CSS document, my JS document and the jQuery document. I tired to follow the directions on here for connecting to the plug-in document but it doesn’t seem to be working because I’m still getting a major image flicker when I click on my navigation. Any help would be greatly appreciated!

</div>
	<p class="posted"><a href="#commentNumber106">Comment</a> by

Lee on 08/06  at  01:10 AM

<div id="commentNumber107" class="commentEntry">
<p>Спасибо отличный сайт....

</div>
	<p class="posted"><a href="#commentNumber107">Comment</a> by

gps on 08/13  at  08:51 AM

<div id="commentNumber108" class="commentEntry">
<p>Please keep up the good work! Thanks for this ! Only just got into JQuery in the past couple of days really impressed by the plug-ins

</div>
	<p class="posted"><a href="#commentNumber108">Comment</a> by

اغنيه مسلسل امراه واخرى on 08/19  at  07:43 AM

<div id="commentNumber109" class="commentEntry">
<p>Do you think that i can integrate this with on order form on my website for <a href="http://www.rentcar.ro" rel="nofollow">Rent a Car</a> offered by by <a href="http://www.rentcar.ro/inchirieri-masini" rel="nofollow">Inchirieri Masini</a>

</div>
	<p class="posted"><a href="#commentNumber109">Comment</a> by

Alexa Popa on 08/21  at  04:12 PM

<div id="commentNumber110" class="commentEntry">
<p>@Adam - thanks for the fix on the Security Error 1000, that was exactly what was needed. Cheers, JD

</div>
	<p class="posted"><a href="#commentNumber110">Comment</a> by

JD on 08/26  at  07:18 PM

<div id="commentNumber111" class="commentEntry">
<p>Great script. Can you tell me where to put a redirect after the images have loaded? Should i just use a location.href=’http://www.google.com’; or is there something else that i should use? Thanks!

</div>
	<p class="posted"><a href="#commentNumber111">Comment</a> by

Dan on 08/31  at  11:06 AM

<div id="commentNumber112" class="commentEntry">
<p>Inside of IE8 (only) when in a popup window, you are unable to call the line:

var img = new Image();

Fixed by calling this instead:

var img = document.createElement("img");

Unless anyone else has a solution, that’s where I am going with this.

</div>
	<p class="posted"><a href="#commentNumber112">Comment</a> by

rjl on 09/04  at  09:25 AM

<div id="commentNumber113" class="commentEntry">
<p>Sheer brilliance.

Cheers man!

</div>
	<p class="posted"><a href="#commentNumber113">Comment</a> by

josh on 09/07  at  09:25 PM

<div id="commentNumber114" class="commentEntry">
<p>Keep up the good work! Thanks for this plugin ! Only just got into JQuery in the past couple of days really impressed by this.

</div>
	<p class="posted"><a href="#commentNumber114">Comment</a> by

Jucarii-Jucarii on 09/08  at  07:43 AM

<div id="commentNumber115" class="commentEntry">
<p>great plugin what can I say, but have some error on Firefox 3.5.2...still a usefull product, thank you

</div>
	<p class="posted"><a href="#commentNumber115">Comment</a> by

cazare bucuresti on 09/09  at  05:00 AM

<div id="commentNumber116" class="commentEntry">
<p>Unfortunately my CSS is loaded above my Jquery .

</div>
	<p class="posted"><a href="#commentNumber116">Comment</a> by

director web on 09/09  at  05:03 AM

<div id="commentNumber117" class="commentEntry">
<p>I get a parameter or an operation is not supported by the underlying object: line 88 - if(sheets[sheetIndex.cssRules ||  ...

</div>
	<p class="posted"><a href="#commentNumber117">Comment</a> by

Mark on 09/16  at  11:06 AM

<div id="commentNumber118" class="commentEntry">
<p>Very cool my compliments

Just had one question how can i let the loading bar disappear when its done loading

like after a few seconds add the display:none something like that

Thanx for this great plugin

</div>
	<p class="posted"><a href="#commentNumber118">Comment</a> by

FinalChaos on 09/18  at  12:49 AM

<div id="commentNumber119" class="commentEntry">
<p>Ignore My last post XD i did some research, jQuery is really incredibly easy. for the ones still looking add this after your script and it fades out nicely  after 3 seconds

$(window).load(function(){delayed = setTimeout(function(){$(’#statusBar’).fadeOut(’slow’);$(’#textStatus’).fadeOut(’slow’);},3000);});

</div>
	<p class="posted"><a href="#commentNumber119">Comment</a> by

FinalChaos on 09/18  at  01:07 AM

<div id="commentNumber120" class="commentEntry">
<p>jQuery is really incredibly easy. Can you tell me where to put a redirect after the images have loaded? Should i just use a location.href=’http://www.google.com’; or is there something else that i should use? Thanks!

</div>
	<p class="posted"><a href="#commentNumber120">Comment</a> by

inchirieri masini on 09/27  at  03:25 PM

<div id="commentNumber121" class="commentEntry">
<p>access is deniend ... :( on line 58 damn it

</div>
	<p class="posted"><a href="#commentNumber121">Comment</a> by

jucarii on 10/02  at  07:06 AM

<div id="commentNumber122" class="commentEntry">
<p>Is there anyway to preload images within a specified .css file instead of scanning all .css files within html?

For example, I have this file theme-2.css that may be dynamically insert into HEAD anytime but I don’t want to have it in the html yet. Can I pass param so that this plugin will load theme-2.css?

Thanks

</div>
	<p class="posted"><a href="#commentNumber122">Comment</a> by

HP on 10/08  at  01:48 AM

<div id="commentNumber123" class="commentEntry">
<p>This is very useful indeed. The alternative would be to use sprees.. either method is really compulsory I think..

</div>
	<p class="posted"><a href="#commentNumber123">Comment</a> by

Case Vacanta on 10/19  at  03:58 AM

<div id="commentNumber124" class="commentEntry">
<p>Thanks for this plugin ! Very nice work,you really have a smooth way to deliver information, thanks for the clear efforts you making.

Forum rent a car Bucharest

</div>
	<p class="posted"><a href="#commentNumber124">Comment</a> by

Alexandra on 11/16  at  06:49 AM

<div id="commentNumber125" class="commentEntry">
<p>Hello there,

in the description you say the script loads all images referenced in css files.
Are the images only loaded for elements currently displayed with given selectors for the site or does it render all images referenced in the css files?

I ask cause, I could need this for example for a site which has in one css
references to images for several pages.

Like a portfolio, where different items trigger different classes for a div box. Depending on the box class a different image is loaded.

A script which would load all referenced images would load a data amount which is dramatically increased for a single page.

</div>
	<p class="posted"><a href="#commentNumber125">Comment</a> by

Daniel Böttner on 11/23  at  07:35 AM

<div id="commentNumber126" class="commentEntry">
<p>Great product but I have problems with it on Firefox 3.5.5. Thanks

</div>
	<p class="posted"><a href="#commentNumber126">Comment</a> by

Imobiliare on 12/01  at  06:41 AM

<div id="commentNumber127" class="commentEntry">
<p>Extending what Adam said about fixing the ‘security error 1000’ issue, I believe his method only works in theory, but doesn’t actually work. However, I believe the following similar solution works.

Find this line:
if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){

and add before it this line:
if (baseURL.indexOf([removed].href.split(’/’)[2]) == -1) {
continue;
}

This will avoid the security error that comes up when JS tries to access a remote CSS file.

Please note that this will make it so that there is no preloading of images from those remote files, but it will prevent the error so that the other local css files preload without getting caught up in an error.

</div>
	<p class="posted"><a href="#commentNumber127">Comment</a> by

Al on 12/28  at  04:58 PM

<div id="commentNumber128" class="commentEntry">
<p>Can you please help me a bit. Just used your script. And can’t get up status bar and status text up. All script’s functions ends without errors but no progress bar is appearing.

In my dreams I see just a div covering all website from visitor while Jquery downloading imgs. Maybe you can help me to modife your script for such goal?

</div>
	<p class="posted"><a href="#commentNumber128">Comment</a> by

Feiron on 01/07  at  06:49 PM

<div id="commentNumber129" class="commentEntry">
<p>You’re right Al… i tried it your way and it , indeed, avoided security errors that might of prevented me from succeding. Thanks a lot for your inputs.

God Bless!

</div>
	<p class="posted"><a href="#commentNumber129">Comment</a> by

tratament impotenta on 01/22  at  04:06 PM

<div id="commentNumber130" class="commentEntry">
<p>i get some stupid error on google chrome, on mozilla firefox works fine but on chrome some stupid errors occurs

does anyone has the same issue?

</div>
	<p class="posted"><a href="#commentNumber130">Comment</a> by

tratament sperma on 01/22  at  04:45 PM

<div id="commentNumber131" class="commentEntry">
<p>Hello, thanks for the great tutorial.

problem is I get an exception when using this in my website :/

“Fehler: uncaught exception: [Exception… “Security error” code: “1000” nsresult: “0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)” location: “file:///D:/Schule/Visuals/Design/HTML/product/js/preloadCssImages/preloadCssImages.jQuery_v5.js Line: 88"]"

Where is the problem? Why security error. I dont understand it

</div>
	<p class="posted"><a href="#commentNumber131">Comment</a> by

martin on 02/15  at  07:20 AM

<div id="commentNumber132" class="commentEntry">
<p>Very good tutorial thank you!

</div>
	<p class="posted"><a href="#commentNumber132">Comment</a> by

Tim on 03/09  at  12:35 PM

<div id="commentNumber133" class="commentEntry">
<p>Great guys..its realy realy very helpfull.i used this and its working great for me.

i have used in my ror application.
i just added

preloadCssImages.js

file in “pblic/javascripts/” and called it in

“application.js “

as

jQuery(document).ready(function() {
jQuery.preloadCssImages();
});

and then added in my layout.html

<%= include_javascript_tag “preloadCssImages” %>

and thats it.
its woking great. :)
Thanks

</div>
	<p class="posted"><a href="#commentNumber133">Comment</a> by

Attiq on 03/10  at  12:49 AM

<div id="commentNumber134" class="commentEntry">
<p>I’m French so excuse for my bad english..

1/ What version of :
- Jquery do you use ? The last is 1.4.2 Your jquery’s demo works with 1.2.6
- preloadCssImages.jQuery_vXXX : Your demo is with V4 and your download with v5…

2/ You just give an example (with old version of your script, and jquery script)

3/ I suggest you to publish a full sample ( with the latest version of You srcipt and jquery)

4/ Like your work…

</div>
	<p class="posted"><a href="#commentNumber134">Comment</a> by

pascal on 03/16  at  09:14 AM

<div id="commentNumber135" class="commentEntry">
<p>Hello,

First of all, sorry for my bad english.
I am using this script and it run well on my web server. First, I have the same security error.. but after investigating your script, this error will only occured if I load an external css file. I know this after adding alert(csshref); bellow var csshref = (sheets[sheetIndex].href) ? sheets[sheetIndex].href : ‘[removed].href’; line 80. I am using twitter widget that load http://widgets.twimg.com/j/2/widget.css so I decide to copy it to my web server and Viola… the error is gone..

Hope this will help.

</div>
	<p class="posted"><a href="#commentNumber135">Comment</a> by

swink on 03/25  at  12:50 PM

<div id="commentNumber136" class="commentEntry">
<p>Thanks for this. I have tried a few others, none of which worked, and had just about resigned myself to the fact that I would have to write my own, but this one is spot on.

</div>
	<p class="posted"><a href="#commentNumber136">Comment</a> by

Liam Bailey on 03/28  at  06:05 PM

<div id="commentNumber137" class="commentEntry">
<p>I second swink’s comment from above. I have the same problem with facebook connect included in my page. I did a hack to overcome it, but a generic solution is needed ...

</div>
	<p class="posted"><a href="#commentNumber137">Comment</a> by

Erez on 04/12  at  06:43 AM

<div id="commentNumber138" class="commentEntry">
<p>How to preload inline images which is in a div like this..

<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
Images/img1.jpg
</div>
<div class="panel">
Images/img2.jpg
</div>

</div>

</div>
	<p class="posted"><a href="#commentNumber138">Comment</a> by

Pandiya Chendur on 04/13  at  01:43 AM

<div id="commentNumber139" class="commentEntry">
<p>You’ve probably saved me an hours work… Thank you so much for this script!

Cheers.

</div>
	<p class="posted"><a href="#commentNumber139">Comment</a> by

Cristian on 04/30  at  05:59 PM

<div id="commentNumber140" class="commentEntry">
<p>A great script but like others i’ve had problems with security errors (‘security error 1000’) because of external scripts and i tried the various fixes people were suggesting that skip the file if its remote, but firefox lists all the stylesheets with the full url so <a href="http://yoursite.com/style.css" rel="nofollow">http://yoursite.com/style.css</a> and it would skip it, but ie just returns style.css so the fixes stop the preloading on firefox so I put this

csshref=csshref.replace([removed].protocol + “//” + [removed].host+"/","");
if (csshref.match(/^https?:\/\//)) continue;

after

var csshref = (sheets[sheetIndex].href) ? sheets[sheetIndex].href : ‘[removed].href’;

and it all worked well. Hope it helps someone!

</div>
	<p class="posted"><a href="#commentNumber140">Comment</a> by

Julian on 05/10  at  06:51 AM

<div id="commentNumber141" class="commentEntry">
<p>Julian, Adam, et al

where are you guys even seeing ‘[removed]’ in any versions of the scripts to fix the “security error 1000” issues?

I tried using all versions of your code samples in the comments, and I’m getting [removed] is undefined in Firebug. Running jQuery 1.4.2 with Firefox 3.6.3.

</div>
	<p class="posted"><a href="#commentNumber141">Comment</a> by

Sean on 05/23  at  12:27 PM

<div id="commentNumber142" class="commentEntry">
<p>Is this script can handle all images or images that declared on css only?

Btw, this nice trick!

</div>
	<p class="posted"><a href="#commentNumber142">Comment</a> by

Samson Delila on 05/27  at  01:47 AM

<div id="commentNumber143" class="commentEntry">
<p>Great Job! Thanks!

</div>
	<p class="posted"><a href="#commentNumber143">Comment</a> by

ladz on 06/04  at  04:21 AM

<div id="commentNumber144" class="commentEntry">
<p>I just load css after js and error disapear.&nbsp;  Great Plugin  Thanks

</div>
	<p class="posted"><a href="#commentNumber144">Comment</a> by

Toshi on 06/17  at  05:02 AM

<div id="commentNumber145" class="commentEntry">
<p>Great plugin! Thanks for your hard work!

</div>
	<p class="posted"><a href="#commentNumber145">Comment</a> by

jucarii on 06/19  at  09:28 AM

<div id="commentNumber146" class="commentEntry">
<p>Is there a callback that runs after everything has been preloaded with this function? I basically want to only show the loading bar while the images are loading, then hide the loader and show the site, but I can’t figure out how to time this. Any suggestions? I just need to be able to call a function when preloadCssImages() is complete. Thanks!

</div>
	<p class="posted"><a href="#commentNumber146">Comment</a> by

heath on 07/09  at  08:23 AM

<div id="commentNumber147" class="commentEntry">
<p>Great stuff! it helps a lot!

</div>
	<p class="posted"><a href="#commentNumber147">Comment</a> by

bijuterii on 07/18  at  12:37 PM

<div id="commentNumber148" class="commentEntry">
<p>The example demo doesn’t seem to work in FF?

Any ideas to fix this

</div>
	<p class="posted"><a href="#commentNumber148">Comment</a> by

Shobhit on 07/19  at  04:40 AM

<div id="commentNumber149" class="commentEntry">
<p>I think all plugin code should be

(function($){

plugin code ......

})(jQuery);

This will prevent conflict with other module that use alias for jQuery.

</div>
	<p class="posted"><a href="#commentNumber149">Comment</a> by

Kurund Jalmi on 07/24  at  03:34 PM

<div id="commentNumber150" class="commentEntry">
<p>Good Concept, this will help websites to act much more faster :-)

</div>
	<p class="posted"><a href="#commentNumber150">Comment</a> by

Anuja Satardekar on 07/27  at  11:48 PM

<div id="commentNumber151" class="commentEntry">
<p>A small fix that works for me for that security error 1000 a lot of people are having. Looks like it has to do with FF not allowing cross domain stylesheet access. I added a check inside a try...catch() block and skip the stylesheet whenever the exception is raised.

Right above the line:

if (sheets[sheetIndex].cssRules || sheets[sheetIndex].rules) {

add the following code:

var allowStylesheetAccess = false;
try {
if (sheets[sheetIndex].cssRules)
allowStylesheetAccess = true;
}
catch (e) {
var ex = e;
}

if (!allowStylesheetAccess) continue;

Hope it helps.

</div>
	<p class="posted"><a href="#commentNumber151">Comment</a> by

J.B. Fidelia on 08/07  at  10:52 AM

<div id="commentNumber152" class="commentEntry">
<p>Hi,

Great plugin.

I’ve just opened the demo in a new window in FF (Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8), Windows 7 and the HTML for the images seems to be incorrect.

Below is the HTML for the first image
<li>http://www.filamentgroup.com/examples/preloadImages/: http://www.filamentgroup.com/examples/preloadImages/&#x22images/icon_product_wireless_lrg.png</li>

&#x22; - quotation mark missed in the PHP?

Cheers

P

</div>
	<p class="posted"><a href="#commentNumber152">Comment</a> by

Paul Wootton on 08/08  at  01:01 PM

<div id="commentNumber153" class="commentEntry">
<p>Hi again,

The post has been mangled.

<quote>&#x22;</quote> perhaps?

</div>
	<p class="posted"><a href="#commentNumber153">Comment</a> by

Paul Wootton on 08/08  at  01:02 PM

<div id="commentNumber154" class="commentEntry">
<p>Nope - was % 22 without the spaces :)

Sry - not used to the board

P

</div>
	<p class="posted"><a href="#commentNumber154">Comment</a> by

Paul Wootton on 08/08  at  01:03 PM

<div id="commentNumber155" class="commentEntry">
<p>Hello,

I love the idea of the plugin and I really see a use for it if one thing were added; a callback function that returns true when the progress has reached 100%.

For example, when loading this page i actually see a loading message (due to your enhanceJS and some creative css I guess) which fades away and makes room for the rest of the page, fully loaded and everything (this could be by accident but it looks awesome). Is there a way to use the plugin that way?

Like this;?
$.preloadImages(callback_func:imagesReady);

</div>
	<p class="posted"><a href="#commentNumber155">Comment</a> by

Luuk Lamers on 08/18  at  05:01 PM

<div id="commentNumber156" class="commentEntry">
<p>I am also realy, realy interested in way of using a callback function.

$.preloadCssImages({statusTextEl: ‘#textStatus’, showPage});

Why syntax like this is not working?

</div>
	<p class="posted"><a href="#commentNumber156">Comment</a> by

Drink86 on 08/23  at  04:55 AM

<div id="commentNumber157" class="commentEntry">
<p>Hi,

running your demo page: http://www.filamentgroup.com/examples/preloadImages/index_v2.html does not work on Firefox 3.6.9. The path looks like this:
: http://www.filamentgroup.com/examples/preloadImages/&#x22images/icon_product_wireless_lrg.png. No images loaded.
IE7 and Opera woks fine.
Please take a look.

</div>
	<p class="posted"><a href="#commentNumber157">Comment</a> by

Achim Schmeer on 09/14  at  07:47 AM

<div id="commentNumber158" class="commentEntry">
<p>Erro: [Exception… “Security error”  code: “1000” nsresult: “0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)”  location: “http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v5.js Line: 88"]

Arquivo-fonte: http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v5.js
Linha: 88

</div>
	<p class="posted"><a href="#commentNumber158">Comment</a> by

Wellington Torrejais da Silva on 09/15  at  08:55 AM

<div id="commentNumber159" class="commentEntry">
<p>I have another jQuery script of yours that I’m running in conjunction with this one called customInput().

http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/

In the customInput function, I’ve added lines right after the section that reads:

if ($(this).is(’[type=checkbox],[type=radio]’)) {

The code is:
//swap out appropriate background image for divB when user hovers over a label
$(’#’ + input.attr(’id’)).next().mouseover(function() {
$(’#divB’).css(’backgroundImage’, ‘url(images/’ + input.attr(’value’) + ‘.jpg)’);
});

In my CSS file I have all the possible background images, and I’ve checked the status to make sure the preloader script is loading them.  However, when I hover over a label, it still re-loads the image as though it had never been cached.  It does this on both IE8 and Firefox.

Any ideas?

Also as an aside, I wanted to let you know that it doesn’t appear the script identifies backgrounds that are followed by “position” and “repeat” values.

For example, it recognizes this:

#div{background: transparent url(images/foobar.jpg)}

but DOES NOT recognize this:

#div{background: transparent url(images/foobar.jpg) no-repeat top left}

</div>
	<p class="posted"><a href="#commentNumber159">Comment</a> by

Tina on 09/20  at  11:01 AM

<div id="commentNumber160" class="commentEntry">
<p>very nice.

thanks alot

</div>
	<p class="posted"><a href="#commentNumber160">Comment</a> by

mohammad reza on 09/23  at  12:34 AM

<div id="commentNumber161" class="commentEntry">
<p>Thank you man!

</div>
	<p class="posted"><a href="#commentNumber161">Comment</a> by

izo on 09/24  at  09:52 AM

<div id="commentNumber162" class="commentEntry">
<p>hi all,

great solution, thanks for this one. :)
but i ran into a problem. i’m using a cdn and all scripts are loaded from a different url. in this case firefox refuses to work correctly. firebug console throws out:

line 88:
Security error” code: “1000
[Break on this error] if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){

not sure how i could solve this. seems like the plugin can’t handle other domains than the baseurl.

any proposals?

</div>
	<p class="posted"><a href="#commentNumber162">Comment</a> by

chris on 10/06  at  09:16 AM

<div id="commentNumber163" class="commentEntry">
<p>looks like the hint in the comment below fixed it for me:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/#commentNumber151

</div>
	<p class="posted"><a href="#commentNumber163">Comment</a> by

chris on 10/06  at  09:55 PM

<div id="commentNumber164" class="commentEntry">
<p>P90X Extreme Home Fitness Workout Program

This product is what I expected from the infomercial - the infomercial is a good representation of what you’ll get. The DVDs are good, come in a small case (no excess packaging to exaggerate or compensate for lack of real product). The accompanying written materials are good too.
However, I found that I wasn’t quite in shape enough when p90x arrived to use it well. I went back and bought Tony Horton’s “Power Half Hour” and used that for a few weeks first - had to wake up some muscles I’ve let go dormant. I’ve been in good shape most of my life, but kind of got lazy lately - I needed to get a basic foundation before I could jump into the incredible workouts he provides.

http://www.p90xbuyonline.com/13dvd-fitness-guide-nutrition-plan-p-63.html

</div>
	<p class="posted"><a href="#commentNumber164">Comment</a> by

p90xsupplier2010 on 10/17  at  11:39 AM

<div id="commentNumber165" class="commentEntry">
<p>@Raihan:

the problem is present when loading external resources.

I’ve solved:

if(baseURLarr[2] == document.domain && (sheets[sheetIndex].cssRules || sheets[sheetIndex].rules)){

</div>
	<p class="posted"><a href="#commentNumber165">Comment</a> by

Pacone on 10/20  at  04:02 AM

<div id="commentNumber166" class="commentEntry">
<p>very nice Resources

</div>
	<p class="posted"><a href="#commentNumber166">Comment</a> by

شكشكه on 11/03  at  10:31 PM

<div id="commentNumber167" class="commentEntry">
<p>Very nice work ! Thanks !

</div>
	<p class="posted"><a href="#commentNumber167">Comment</a> by

Jucarii Copii on 11/18  at  08:45 AM

<div id="commentNumber168" class="commentEntry">
<p>Nice script .. thanks a lot

</div>
	<p class="posted"><a href="#commentNumber168">Comment</a> by

Watch Source on 11/21  at  10:26 AM

<div id="commentNumber169" class="commentEntry">
<p>it sounds lovely for this mind.

moncler sale
cheap moncler coats
discount moncler jackets
north face sale
cheap north face jackets
the north face outlet
cheap north face

</div>
	<p class="posted"><a href="#commentNumber169">Comment</a> by

cheap moncler jackets on 11/29  at  08:59 PM

<div id="commentNumber170" class="commentEntry">
<p>i have a question. is it possible to load different image lists at a time? i have a website and depending on user selection need to load specific img files at a time. thanks.

</div>
	<p class="posted"><a href="#commentNumber170">Comment</a> by

kerb on 12/05  at  04:20 PM

<div id="commentNumber171" class="commentEntry">
<p>Hi,

Is it possible to use the script on a specific stylesheet? or directory? Any help would be much appreciated.

</div>
	<p class="posted"><a href="#commentNumber171">Comment</a> by

Lance on 12/08  at  05:21 AM

<div id="commentNumber172" class="commentEntry">
<p>My issue with this script was “ Security error” code: “1000 caused by if(document.styleSheets<i>.cssRules){//w3 “  caused by use of external scripts that add external CSS, this below fixes this by ignoring remote CSS (this isnt going to be the ideal solution for everyone).

On line 88 replace “if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){” with:

-------------------------
if(styleHostName == hostName && (sheets[sheetIndex].cssRules || sheets[sheetIndex].rules)){
-------------------------

After line 87, add:

------------------------------------------

var hostName = [removed].hostname;

re = new RegExp(’^(?:f|ht)tp(?:s)?\://([^/]+)’, ‘im’);
var styleHostName = baseURL.match(re)[1].toString();

------------------------------------------

</i></div><i>
	<p class="posted"><a href="#commentNumber172">Comment</a> by

Gavin Dibley on 12/12  at  08:03 PM

<div id="commentNumber173" class="commentEntry">
<p>Great stuff! it helps a lot on the new project....

</div>
	<p class="posted"><a href="#commentNumber173">Comment</a> by

Schuhe Girl on 12/20  at  09:39 AM

<div id="commentNumber174" class="commentEntry">
<p>Waste of time as it invokes a firefox security error

awesome

</div>
	<p class="posted"><a href="#commentNumber174">Comment</a> by

Dave on 12/23  at  11:31 AM

<div id="commentNumber175" class="commentEntry">
<p>Well this is one useful script i would like to give it a try.

thanks for sharing.
take care.

</div>
	<p class="posted"><a href="#commentNumber175">Comment</a> by

cryoffalcon on 12/25  at  04:38 AM

<div id="commentNumber176" class="commentEntry">
<p>Hello

I need help, i want to show the status of the pre-loading of the images

with the percentage status

please let me know how, even an example would help!

</div>
	<p class="posted"><a href="#commentNumber176">Comment</a> by

SPNTFW on 01/09  at  01:40 PM

<div id="commentNumber177" class="commentEntry">
<p>great Plugin, check my personal list for other options

http://www.ajaxshake.com</pre>

</div>
	<p class="posted"><a href="#commentNumber177">Comment</a> by

Ajax Examples on 01/17  at  09:34 AM

<div id="commentNumber178" class="commentEntry">
<p>i would change

if(!img.complete){
to
if(!img.complete || image.readyState === 4 ){
to deal with images that have already been cache in IE

</div>
	<p class="posted"><a href="#commentNumber178">Comment</a> by

syamadas on 01/24  at  12:30 PM

<div id="commentNumber179" class="commentEntry">
<p>sorry i meant

if(!img.complete && image.readyState !== 4 ){

</div>
	<p class="posted"><a href="#commentNumber179">Comment</a> by

syamadas on 01/24  at  12:32 PM

<div id="commentNumber180" class="commentEntry">
<p>Great work, this will really save a lot of time.

</div>
	<p class="posted"><a href="#commentNumber180">Comment</a> by

RCA ieftin on 01/24  at  05:03 PM

<div id="commentNumber181" class="commentEntry">
<p>Great work! Very nice script ! Thanks !

</div>
	<p class="posted"><a href="#commentNumber181">Comment</a> by

Bebeshopping on 01/26  at  01:12 PM

<div id="commentNumber182" class="commentEntry">
<p>On  preloadCssImages.jQuery_v5.js  I was getting a security 1000 error in Firefox on line 88

It was trying to pre load from a google maps sheet; so, I added the following at line 90 (ended at line 144) to prevent loading external files.

if(baseURL.indexOf([removed].href) != -1){

</div>
	<p class="posted"><a href="#commentNumber182">Comment</a> by

GetTheJawsOfLife on 01/27  at  04:06 PM

<div id="commentNumber183" class="commentEntry">
<p>Very nice and useful script. Thank you!

</div>
	<p class="posted"><a href="#commentNumber183">Comment</a> by

Oanasoft on 01/29  at  03:40 AM

<div id="commentNumber184" class="commentEntry">
<p>This script is the best choice. Very useful.

</div>
	<p class="posted"><a href="#commentNumber184">Comment</a> by

Bebeshopping on 01/29  at  03:53 AM

<div id="commentNumber185" class="commentEntry">
<p>Great work! Congratulations!

</div>
	<p class="posted"><a href="#commentNumber185">Comment</a> by

Bebeshopping on 01/29  at  04:10 AM

<div id="commentNumber186" class="commentEntry">
<p>well this is one awesome script, i would like to use it in future.

thanks for sharing.

</div>
	<p class="posted"><a href="#commentNumber186">Comment</a> by

cryoffalcon on 02/04  at  12:57 AM

<div id="commentNumber187" class="commentEntry">
<p>nice query thanx for sharing ................

</div>
	<p class="posted"><a href="#commentNumber187">Comment</a> by

deepak sharma on 02/09  at  07:18 AM

<div id="commentNumber188" class="commentEntry">
<p>got some problems when dealing with hidden divs with css background image embedded with them.. they appear after the page loads..hope you can help me with this.. im a still newbie in jquery and would want to preload hidden images so that when a hover event happens they are ready to show..

:-)

</div>
	<p class="posted"><a href="#commentNumber188">Comment</a> by

jonathan on 02/14  at  02:58 PM

<div id="commentNumber189" class="commentEntry">
<p>Your script doesn’t work. Period.

</div>
	<p class="posted"><a href="#commentNumber189">Comment</a> by

Pissed off on 02/15  at  08:08 PM

<div id="commentNumber190" class="commentEntry">
<p>Hi,

Great plugin!

We experienced the security exception when embedding a twitter widget onto a page.

The fix for us was this comment:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/#commentNumber151

</div>
	<p class="posted"><a href="#commentNumber190">Comment</a> by

Ben Foster on 02/17  at  10:43 AM

<div id="commentNumber191" class="commentEntry">
<p>Great script, very elegant solution to several classic problems.

Something strange I’ve got happening here though. I have main.css which then loads a reset.css and core.css. These are being loaded, however IE7 and IE8 both though a permissions error. If I remove the preloading activation call ( $.preloadCssImages() ) the error is not thrown. Any idea why this might be happening?

The error seems to be coming from line 121 of jquery.preload-css-images. Which is as follows: 

if(!w3cImport && sheets[sheetIndex].imports && sheets[sheetIndex].imports.length)

Reached a dead end myself. Can anyone shed any light on this problem?

</div>
	<p class="posted"><a href="#commentNumber191">Comment</a> by

Paul Hayes on 03/01  at  08:13 AM

<div id="commentNumber192" class="commentEntry">
<p>Just noticed my comment was automatically stripped of some JS.

var hostName = [removed].hostname;

Should be:

var hostName = window.locati on.hostn ame.hostname (if it doesnt strip it again)

</div>
	<p class="posted"><a href="#commentNumber192">Comment</a> by

Gavin Dibley on 03/04  at  01:30 AM

<div id="commentNumber193" class="commentEntry">
<p>Thats an asset. It was a pain in the neck to create sprites to preload images. some of our clients were too touchy in this matter, i have not yet tried this script but if it works then i think this should be the biggest help. awesome idea

</div>
	<p class="posted"><a href="#commentNumber193">Comment</a> by

TemplatesRule.com on 03/05  at  08:20 AM

<div id="commentNumber194" class="commentEntry">
<p>@Ben Foster I had the same issue with the twitter widget thanks for the link for a fix :)

</div>
	<p class="posted"><a href="#commentNumber194">Comment</a> by

inchirieri masini on 03/05  at  08:48 AM

<div id="commentNumber195" class="commentEntry">
<p>I have run the demo script… and I think is really great this plugin.

</div>
	<p class="posted"><a href="#commentNumber195">Comment</a> by

racing games online on 05/04  at  05:15 AM

<div id="commentNumber196" class="commentEntry">
<p>I really like what you are saying, and are glad I found your website. Please keep it up. I was recommended this website by my Friends. I’m not sure whether this post is written by him as nobody else knows such detailed about my problem. You’re incredible! Thanks!

</div>
	<p class="posted"><a href="#commentNumber196">Comment</a> by

classifieds on 05/13  at  05:44 AM

<div id="commentNumber197" class="commentEntry">
<p>very nice. .

thanks alot :$

</div>
	<p class="posted"><a href="#commentNumber197">Comment</a> by

توبيكات ملونه on 05/13  at  08:29 AM

<div id="commentNumber198" class="commentEntry">
<p>I love jquery - nice script.

</div>
	<p class="posted"><a href="#commentNumber198">Comment</a> by

Roger on 05/21  at  10:06 PM

<div id="commentNumber199" class="commentEntry">
<p>I just load css after js and error disapear.&nbsp; Great Plugin Thanks . :)

</div>
	<p class="posted"><a href="#commentNumber199">Comment</a> by

مسلسل بوكريم برقبته سبع حري on 05/21  at  10:12 PM

<div id="commentNumber200" class="commentEntry">
<p>Demo images above don’t seem to be displaying in Firefox.

</div>
	<p class="posted"><a href="#commentNumber200">Comment</a> by

Ed on 06/20  at  01:45 PM

<div id="commentNumber201" class="commentEntry">
<p>How to insert call back function inside the preloadCssImage? Thanks

</div>
	<p class="posted"><a href="#commentNumber201">Comment</a> by

bryan on 06/26  at  11:15 AM

<div id="commentNumber202" class="commentEntry">
<p>How to insert call back function inside the preloadCssImage? Thanks

</div>
	<p class="posted"><a href="#commentNumber202">Comment</a> by

bryan on 06/26  at  11:15 AM

<div id="commentNumber203" class="commentEntry">
<p>By the way, can make it load a path instead the image used in CSS file? Thanks

</div>
	<p class="posted"><a href="#commentNumber203">Comment</a> by

bryan on 06/26  at  11:17 AM

<div id="commentNumber204" class="commentEntry">
<p>You deserve the best and I know this will just add to your very proud accomplishments in your already beautiful and deserving blessed life. I wish you all the best and again. Thanks a lot..

</div>
	<p class="posted"><a href="#commentNumber204">Comment</a> by

Betting Bonus on 06/27  at  01:52 PM

<div id="commentNumber205" class="commentEntry">
<p>Excellent is the only word i can give u for this wonderful blog, keep it up. I will come back again to read some more interesting things on this topic

</div>
	<p class="posted"><a href="#commentNumber205">Comment</a> by

New Bonus on 06/27  at  01:53 PM

<div id="commentNumber206" class="commentEntry">
<p>I’m happy I found this blog! From time to time, students want to cognitive the keys of productive literary essays composing. Your first-class knowledge about this good post can become a proper basis for such people. Thanks

</div>
	<p class="posted"><a href="#commentNumber206">Comment</a> by

Pariuri sportive on 06/27  at  01:55 PM

<div id="commentNumber207" class="commentEntry">
<p>I’m happy I found this blog! From time to time, students want to cognitive the keys of productive literary essays composing.

</div>
	<p class="posted"><a href="#commentNumber207">Comment</a> by

asigurari locuinte, case on 07/01  at  09:09 AM