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

Hi I dug your script and wanted to port it to Prototype.
So here it is: http://pastie.org/209498

Comment by JDD on 06/05  at  12:12 PM

@JDD: Nice work. You’ve given us some ideas where we can optimize ours as well! Thanks.

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

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!

Comment by Sam Pohlenz on 06/20  at  03:46 PM

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

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

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.

Comment by Sam Pohlenz on 06/20  at  04:24 PM

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.

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

Great work, this will really save a lot of time. Just concerned about IE issues though.

Comment by Abhimanyu Grover on 06/21  at  08:49 AM

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

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

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

Comment by Marc on 06/21  at  11:40 AM

@Marc: Great catch, thanks so much. We’ll add it in there ASAP!

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

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)

Comment by Antonio Bueno on 06/23  at  05:35 AM

@Antonio: Thanks, we’ll look into it. Looks like a regression in the last update.

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

and how do i use this with body onload?? i dont want users to have to click

Comment by Michal on 08/07  at  04:58 AM

@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();
});

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

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/

Comment by alexander on 08/09  at  01:22 PM

Receive “access is denied” on line 58.
cssPile+= sheets[ i ].cssText;

Could this be cause by a cross-domain issue?

Comment by Rick on 08/20  at  01:34 PM

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

Comment by Zenmaster on 08/24  at  04:41 AM

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!

Comment by Terrence on 09/04  at  01:41 PM

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

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

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?

Comment by Raihan on 09/17  at  12:46 AM

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.

Comment by Daniel Wright on 09/17  at  01:55 PM

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

Comment by alex on 09/18  at  05:47 PM

“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!

Comment by AdrienneA on 10/21  at  05:46 PM

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)

Comment by Terrence on 10/21  at  06:00 PM

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

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

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!

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

Thanks, Scott and Terrence. I’ll give it a whirl!

Comment by AdrienneA on 10/22  at  07:39 PM

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

Comment by AdrienneA on 10/23  at  06:31 PM

OK!! So I’ve read all the comments, articles, and got everything installed.  But as a novice I have a question:  In your original version, you had to refer to a directory where the stylesheets (o r image directories?) were located.  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

Comment by Erik on 10/28  at  08:01 PM

Is there a problem running mootools scripts along with jQuery?  My mootools fx.slide script would not work unless I placed all the jQuery scripts ABOVE the mootools scripts in the <head> 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>

Comment by Erik on 10/28  at  08:26 PM

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

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

@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!

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

Thanks for the response, but I have one more question:  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

Comment by Erik on 10/31  at  04:23 PM

@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 :)

Comment by Jarryd on 11/12  at  07:35 PM

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.

Comment by Ken G on 11/13  at  08:34 AM

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

Comment by Olli on 11/18  at  02:52 PM

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…

Comment by Fontaine on 11/19  at  12:51 AM

Hoi ik ben het helemaal mee eens http://www.wereldvanproducten.com

Comment by Joshared on 11/23  at  08:40 AM

@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!

Comment by Richard on 11/25  at  05:40 AM

@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

Comment by Richard on 11/25  at  07:21 AM

Hi!

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

Regards,
Jaka

Comment by Jaka Jancar on 11/25  at  08:17 PM

Thanks for the great script!

Comment by anon on 11/28  at  08:22 AM

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.

Comment by dangdang on 12/06  at  10:32 AM

I’ve got it downloaded. Thanks.

Comment by Rahul on 12/10  at  12:29 PM

I have use it on my site (wpesp.com). Thanks!!

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

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?

Comment by Brian on 12/24  at  01:40 PM

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

Comment by Jason L on 12/25  at  02:41 AM

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.

Comment by Jez on 01/11  at  11:52 AM

Security error” code: “1000
at Line 37

if(sheets.cssRules){//w3

Comment by feroz on 01/18  at  11:51 PM

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.

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

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

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

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

Comment by Speednet on 01/28  at  11:49 AM

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

Comment by Soulhuntre on 01/30  at  01:16 PM

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 http://www.quoteseek.info

Comment by Jez on 01/30  at  03:17 PM

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

Comment by Soulhuntre on 01/30  at  03:22 PM

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.

Comment by Niels on 01/30  at  06:03 PM

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.

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

Excellent, thanks a lot Niels - everything working OK now (and obviously thanks to Scott for the plug-in). Using 1.2.6. here.

Comment by Jez on 01/30  at  06:46 PM

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?

Comment by Soulhuntre on 01/30  at  07:53 PM

@ Soulhuntre: try running this plugin onload instead of at domready.

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

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

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

Comment by Soulhuntre on 01/30  at  08:18 PM

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?

Comment by jono on 01/31  at  07:35 PM

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!

Comment by Soulhuntre on 02/04  at  03:48 AM

The “simplified demo” URL returns Page Not Found.

Comment by Adrian B on 02/04  at  09:06 AM

Thanks for this script . Very Usefull

Comment by Michael on 02/05  at  04:30 PM

The script is just great! Congrats! It’s inspiring to see all of your hard work. I have bookmarked your website.

Regards, Paul

Comment by Inchirieri masini on 02/09  at  07:34 PM

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

Comment by gustin on 02/10  at  07:52 PM

@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

Comment by Soulhuntre on 02/10  at  10:08 PM

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!

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

Hello. A found your script very usefull, but I need a Callback function for it. Are U going to add such func?

Regards,
UdarEC

Comment by UdarEC on 02/20  at  02:06 PM

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

Comment by Ritchie Anesco on 02/26  at  12:54 AM

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?

Comment by Will on 03/11  at  01:46 AM

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.

Comment by Marcus Dalgren on 03/17  at  05:21 AM

i’m getting the same - Receive “access is denied” on line 58

Any ideea why ? TKs

Comment by Inchirieri masini on 03/18  at  06:18 AM

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

Comment by Andre on 03/19  at  07:20 PM

help

Comment by sanju on 03/27  at  09:33 AM

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 ?

Comment by Farmacii on 03/30  at  02:48 AM

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.

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

Super script! 10x!

Comment by Tavy on 04/03  at  03:34 AM

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 preaload normal images using jQuery read this detailed article.

Comment by JQuery Howto on 04/06  at  08:33 AM

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

has anyone tried manipulating this code

Comment by loan modification on 04/14  at  10:23 PM

How can I call a function AFTER all of the images are pre-loaded?

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

Comment by brainfog0 on 04/21  at  11:14 AM

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.

Comment by Inchirieri Masini on 04/24  at  03:58 PM

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.

Comment by jon on 04/27  at  03:39 PM

@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..?

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

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.

Comment by jon on 04/27  at  04:17 PM

I can confirm “security error: 1000” on a web server. bummer.

Comment by rene on 05/08  at  03:19 AM

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.

Comment by rene on 05/08  at  03:48 AM

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…

Comment by proteo on 05/21  at  08:41 AM

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.

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

what if the specific page with preloading script does not use all the images referenced in CSS?.. they will be preloaded anyway, right?

Comment by bony on 06/18  at  03:48 PM

have to try it first

Comment by inchirieri auto on 06/21  at  04:47 PM

Hey, is there any way to know when the images are 100% done loading? A callback?

Comment by Jens on 06/25  at  04:56 AM

@Jens: Yes, you can use the load event for that.

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

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

@Scott Thanks!

Comment by Jens on 06/25  at  09:44 AM

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

Comment by supermegapollo on 06/26  at  02:54 PM

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.

Comment by Blake on 06/29  at  10:15 PM

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.

Comment by JAH on 07/03  at  05:56 AM

same error on mozilla 3.5!!!

Comment by bijuterii on 07/08  at  04:29 PM

Managed to fix the problem for myself by using:

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

Comment by JAH on 07/09  at  03:11 AM

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

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

Works like a charm, thanks for the plugin, Filament!  Using it on a carbon calculator site for the city of Boston, hope to have it up in a few months.  Check out the jQuery conference in September if you don’t already know about it: http://events.jquery.com/.

Comment by Taylor Kearns on 07/18  at  09:44 AM

Taylor nice link. I think it was organized by the same people which set up the conference in Bucharest this year in january

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

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

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

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.

Comment by Jucarii on 07/28  at  04:04 PM

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!

Comment by Lee on 08/06  at  01:10 AM

Спасибо отличный сайт....

Comment by gps on 08/13  at  08:51 AM

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

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

Do you think that i can integrate this with on order form on my website for Rent a Car offered by by Inchirieri Masini

Comment by Alexa Popa on 08/21  at  04:12 PM

@Adam - thanks for the fix on the Security Error 1000, that was exactly what was needed. Cheers, JD

Comment by JD on 08/26  at  07:18 PM

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!

Comment by Dan on 08/31  at  11:06 AM

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.

Comment by rjl on 09/04  at  09:25 AM

Sheer brilliance.
Cheers man!

Comment by josh on 09/07  at  09:25 PM

Keep up the good work! Thanks for this plugin ! Only just got into JQuery in the past couple of days really impressed by this.

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

great plugin what can I say, but have some error on Firefox 3.5.2...still a usefull product, thank you

Comment by cazare bucuresti on 09/09  at  05:00 AM

Unfortunately my CSS is loaded above my Jquery .

Comment by director web on 09/09  at  05:03 AM

I get a parameter or an operation is not supported by the underlying object: line 88 - if(sheets[sheetIndex.cssRules || ...

Comment by Mark on 09/16  at  11:06 AM

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

Comment by FinalChaos on 09/18  at  12:49 AM

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

Comment by FinalChaos on 09/18  at  01:07 AM

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!

Comment by inchirieri masini on 09/27  at  03:25 PM

access is deniend ... :( on line 58 damn it

Comment by jucarii on 10/02  at  07:06 AM

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

Comment by HP on 10/08  at  01:48 AM

This is very useful indeed. The alternative would be to use sprees.. either method is really compulsory I think..

Comment by Case Vacanta on 10/19  at  03:58 AM

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

Comment by Alexandra on 11/16  at  06:49 AM

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.

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

Great product but I have problems with it on Firefox 3.5.5. Thanks

Comment by Imobiliare on 12/01  at  06:41 AM

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.

Comment by Al on 12/28  at  04:58 PM

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?

Comment by Feiron on 01/07  at  06:49 PM

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!

Comment by tratament impotenta on 01/22  at  04:06 PM

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?

Comment by tratament sperma on 01/22  at  04:45 PM

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

Comment by martin on 02/15  at  07:20 AM

Very good tutorial thank you!

Comment by Tim on 03/09  at  12:35 PM

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

Comment by Attiq on 03/10  at  12:49 AM

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…

Comment by pascal on 03/16  at  09:14 AM

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.

Comment by swink on 03/25  at  12:50 PM

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.

Comment by Liam Bailey on 03/28  at  06:05 PM

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

Comment by Erez on 04/12  at  06:43 AM

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>

Comment by Pandiya Chendur on 04/13  at  01:43 AM

You’ve probably saved me an hours work… Thank you so much for this script!

Cheers.

Comment by Cristian on 04/30  at  05:59 PM

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 http://yoursite.com/style.css 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!

Comment by Julian on 05/10  at  06:51 AM

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.

Comment by Sean on 05/23  at  12:27 PM

Is this script can handle all images or images that declared on css only?
Btw, this nice trick!

Comment by Samson Delila on 05/27  at  01:47 AM

Great Job! Thanks!

Comment by ladz on 06/04  at  04:21 AM

I just load css after js and error disapear.  Great Plugin Thanks

Comment by Toshi on 06/17  at  05:02 AM

Great plugin! Thanks for your hard work!

Comment by jucarii on 06/19  at  09:28 AM

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!

Comment by heath on 07/09  at  08:23 AM

Great stuff! it helps a lot!

Comment by bijuterii on 07/18  at  12:37 PM

The example demo doesn’t seem to work in FF?
Any ideas to fix this

Comment by Shobhit on 07/19  at  04:40 AM

I think all plugin code should be

(function($){

plugin code ......

})(jQuery);

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

Comment by Kurund Jalmi on 07/24  at  03:34 PM

Good Concept, this will help websites to act much more faster :-)

Comment by Anuja Satardekar on 07/27  at  11:48 PM

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.

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

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

Comment by Paul Wootton on 08/08  at  01:01 PM

Hi again,

The post has been mangled.

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

Comment by Paul Wootton on 08/08  at  01:02 PM

Nope - was % 22 without the spaces :)

Sry - not used to the board

P

Comment by Paul Wootton on 08/08  at  01:03 PM

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

Comment by Luuk Lamers on 08/18  at  05:01 PM

I am also realy, realy interested in way of using a callback function.

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

Why syntax like this is not working?

Comment by Drink86 on 08/23  at  04:55 AM

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.

Comment by Achim Schmeer on 09/14  at  07:47 AM

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

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

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}

Comment by Tina on 09/20  at  11:01 AM

very nice.

thanks alot

Comment by mohammad reza on 09/23  at  12:34 AM

Thank you man!

Comment by izo on 09/24  at  09:52 AM

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?

Comment by chris on 10/06  at  09:16 AM

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

Comment by chris on 10/06  at  09:55 PM

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

Comment by p90xsupplier2010 on 10/17  at  11:39 AM

@Raihan:

the problem is present when loading external resources.

I’ve solved:

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

Comment by Pacone on 10/20  at  04:02 AM

very nice Resources

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

Very nice work ! Thanks !

Comment by Jucarii Copii on 11/18  at  08:45 AM

Nice script .. thanks a lot

Comment by Watch Source on 11/21  at  10:26 AM

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.

Comment by kerb on 12/05  at  04:20 PM

Hi,

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

Comment by Lance on 12/08  at  05:21 AM

My issue with this script was “ Security error” code: “1000 caused by if(document.styleSheets.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();

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

Comment by Gavin Dibley on 12/12  at  08:03 PM

Great stuff! it helps a lot on the new project....

Comment by Schuhe Girl on 12/20  at  09:39 AM

Waste of time as it invokes a firefox security error

awesome

Comment by Dave on 12/23  at  11:31 AM

Well this is one useful script i would like to give it a try.
thanks for sharing.
take care.

Comment by cryoffalcon on 12/25  at  04:38 AM

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!

Comment by SPNTFW on 01/09  at  01:40 PM

great Plugin, check my personal list for other options
http://www.ajaxshake.com</pre>

Comment by Ajax Examples on 01/17  at  09:34 AM

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

Comment by syamadas on 01/24  at  12:30 PM

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

Comment by syamadas on 01/24  at  12:32 PM

Great work, this will really save a lot of time.

Comment by RCA ieftin on 01/24  at  05:03 PM

Great work! Very nice script ! Thanks !

Comment by Bebeshopping on 01/26  at  01:12 PM

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

Comment by GetTheJawsOfLife on 01/27  at  04:06 PM

Very nice and useful script. Thank you!

Comment by Oanasoft on 01/29  at  03:40 AM

This script is the best choice. Very useful.

Comment by Bebeshopping on 01/29  at  03:53 AM

Great work! Congratulations!

Comment by Bebeshopping on 01/29  at  04:10 AM

well this is one awesome script, i would like to use it in future.
thanks for sharing.

Comment by cryoffalcon on 02/04  at  12:57 AM

nice query thanx for sharing ................

Comment by deepak sharma on 02/09  at  07:18 AM

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

:-)

Comment by jonathan on 02/14  at  02:58 PM

Your script doesn’t work. Period.

Comment by Pissed off on 02/15  at  08:08 PM

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

Comment by Ben Foster on 02/17  at  10:43 AM

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?

Comment by Paul Hayes on 03/01  at  08:13 AM

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)

Comment by Gavin Dibley on 03/04  at  01:30 AM

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

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

@Ben Foster I had the same issue with the twitter widget thanks for the link for a fix :)

Comment by inchirieri masini on 03/05  at  08:48 AM

I have run the demo script… and I think is really great this plugin.

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

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!

Comment by classifieds on 05/13  at  05:44 AM

very nice. .
thanks alot :$

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

I love jquery - nice script.

Comment by Roger on 05/21  at  10:06 PM

I just load css after js and error disapear.  Great Plugin Thanks . :)

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

Demo images above don’t seem to be displaying in Firefox.

Comment by Ed on 06/20  at  01:45 PM

How to insert call back function inside the preloadCssImage? Thanks

Comment by bryan on 06/26  at  11:15 AM

How to insert call back function inside the preloadCssImage? Thanks

Comment by bryan on 06/26  at  11:15 AM

By the way, can make it load a path instead the image used in CSS file? Thanks

Comment by bryan on 06/26  at  11:17 AM

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

Comment by Betting Bonus on 06/27  at  01:52 PM

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

Comment by New Bonus on 06/27  at  01:53 PM

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

Comment by Pariuri sportive on 06/27  at  01:55 PM

I’m happy I found this blog! From time to time, students want to cognitive the keys of productive literary essays composing.

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