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

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

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!

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.

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

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

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)

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

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/

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

Could this be cause by a cross-domain issue?

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

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!

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?

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.

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

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

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)

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

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!

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

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>

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

@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

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.

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

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…

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

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

@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

Hi!

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

Regards,
Jaka

Thanks for the great script!

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.

I’ve got it downloaded. Thanks.

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

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?

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

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.

Security error” code: “1000
at Line 37

if(sheets.cssRules){//w3