menu

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.

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.

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

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.

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.

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.

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

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

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

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.

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.

<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 :-(

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

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

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

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.

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

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

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.

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

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.

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

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?

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?

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

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

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

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

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

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

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.

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.

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

<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

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

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

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

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.

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.

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

<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

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

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

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?

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.

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:

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.

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

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

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:

<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

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

<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