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.
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.
“Agency of the Year” - 2015 Net Awards
Designing with Progressive Enhancement
Responsible Responsive Design
Comments
So here it is: http://pastie.org/209498
JDD on 06/05 at 12:12 PM
Scott (Filament) on 06/05 at 05:47 PM
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!
Sam Pohlenz on 06/20 at 03:46 PM
Scott (Filament) on 06/20 at 03:58 PM
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.
Sam Pohlenz on 06/20 at 04:24 PM
Scott (Filament) on 06/20 at 05:43 PM
Abhimanyu Grover on 06/21 at 08:49 AM
Scott (Filament) on 06/21 at 11:22 AM
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;
}
}
Marc on 06/21 at 11:40 AM
Scott (Filament) on 06/21 at 11:50 AM
http://www.filamentgroup.com/examples/preloadImages/"http://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)
Antonio Bueno on 06/23 at 05:35 AM
Scott (Filament) on 06/23 at 08:34 AM
Michal on 08/07 at 04:58 AM
To run it on dom ready:
$(function(){
$.preloadCssImages();
});
To run on body load:
$(’body’).load(function(){
$.preloadCssImages();
});
Scott (Filament) on 08/07 at 08:29 AM
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/
alexander on 08/09 at 01:22 PM
cssPile+= sheets[ i ].cssText;
Could this be cause by a cross-domain issue?
Rick on 08/20 at 01:34 PM
Any suggestions to why this is happening ?
Kind regards
zenmaster
Zenmaster on 08/24 at 04:41 AM
Terrence on 09/04 at 01:41 PM
$(document).ready(function(){
//put your DOM-related scripting here
});
Scott (Filament) on 09/04 at 01:48 PM
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?
Raihan on 09/17 at 12:46 AM
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 Wright on 09/17 at 01:55 PM
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.
alex on 09/18 at 05:47 PM
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!
AdrienneA on 10/21 at 05:46 PM
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)
Terrence on 10/21 at 06:00 PM
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.
Scott (Filament) on 10/22 at 09:08 AM
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!
Scott (Filament) on 10/22 at 09:40 AM
AdrienneA on 10/22 at 07:39 PM
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!
AdrienneA on 10/23 at 06:31 PM
/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
Erik on 10/28 at 08:01 PM
<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>
Erik on 10/28 at 08:26 PM
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.
Scott (Filament) on 10/31 at 12:51 PM
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!
Scott (Filament) on 10/31 at 03:50 PM
Do I need to call this script on every page?
Is it possible redirect after the script is loaded?
Erik
Erik on 10/31 at 04:23 PM
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 :)
Jarryd on 11/12 at 07:35 PM
Ken G on 11/13 at 08:34 AM
Kind regards,
Olli
Olli on 11/18 at 02:52 PM
if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){
Our CSS and JS files are served from a separate server that lives on another domain…
Fontaine on 11/19 at 12:51 AM
Joshared on 11/23 at 08:40 AM
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!
Richard on 11/25 at 05:40 AM
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
Richard on 11/25 at 07:21 AM
The script doesn’t work via HTTPS. This should be quite easily fixable, from what I can see.
Regards,
Jaka
Jaka Jancar on 11/25 at 08:17 PM
anon on 11/28 at 08:22 AM
Thank you again.
dangdang on 12/06 at 10:32 AM
Rahul on 12/10 at 12:29 PM
Víctor on 12/17 at 05:10 AM
Brian on 12/24 at 01:40 PM
Jason
Jason L on 12/25 at 02:41 AM
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.
Jez on 01/11 at 11:52 AM
at Line 37
if(sheets.cssRules){//w3
feroz on 01/18 at 11:51 PM
Scott (Filament) on 01/19 at 12:47 PM
var myImages = [ ‘a.jpg’, ‘b.gif’, ‘c.png’];
for(var i=0; i<myImages.length; i++){
var img = new Image();
img.src = myImages;
};
Scott (Filament) on 01/19 at 12:56 PM
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
Speednet on 01/28 at 11:49 AM
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!).
Soulhuntre on 01/30 at 01:16 PM
Jez on 01/30 at 03:17 PM
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
Soulhuntre on 01/30 at 03:22 PM
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'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.
Niels on 01/30 at 06:03 PM
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.
Scott (Filament) on 01/30 at 06:24 PM
Jez on 01/30 at 06:46 PM
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?
Soulhuntre on 01/30 at 07:53 PM
$(window).load(function () {
$.preloadCssImages();
});
Scott (Filament) on 01/30 at 08:16 PM
$(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
Soulhuntre on 01/30 at 08:18 PM
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?
jono on 01/31 at 07:35 PM
Thanks for all the effort that went into it and I hope eventually it gets fixed because it is a much needed tool!
Soulhuntre on 02/04 at 03:48 AM
Adrian B on 02/04 at 09:06 AM
Michael on 02/05 at 04:30 PM
Regards, Paul
Inchirieri masini on 02/09 at 07:34 PM
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){
gustin on 02/10 at 07:52 PM
Unfortunately, this project looks like it is essentially abandoned so you might not find an answer.
Ken
Soulhuntre on 02/10 at 10:08 PM
Once we find a fix, we’ll post an update.
We welcome any ideas that anyone might have in the meantime. Thanks!
Scott (Filament) on 02/11 at 04:40 PM
Regards,
UdarEC
UdarEC on 02/20 at 02:06 PM
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
Ritchie Anesco on 02/26 at 12:54 AM
Will on 03/11 at 01:46 AM
Kindly, Marcus.
Marcus Dalgren on 03/17 at 05:21 AM
Any ideea why ? TKs
Inchirieri masini on 03/18 at 06:18 AM
Thanks again
Andre on 03/19 at 07:20 PM
sanju on 03/27 at 09:33 AM
if(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){
I have notice another guy with the same problem.
Any idea why ?
Farmacii on 03/30 at 02:48 AM
Scott (Filament) on 04/01 at 11:11 AM
Tavy on 04/03 at 03:34 AM
JQuery Howto on 04/06 at 08:33 AM
$.preloadCssImages();
});
has anyone tried manipulating this code
loan modification on 04/14 at 10:23 PM
Like a callback function?? I think thats what I need
brainfog0 on 04/21 at 11:14 AM
Inchirieri Masini on 04/24 at 03:58 PM
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.
jon on 04/27 at 03:39 PM
Scott (Filament) on 04/27 at 03:51 PM
jon on 04/27 at 04:17 PM
rene on 05/08 at 03:19 AM
rene on 05/08 at 03:48 AM
proteo on 05/21 at 08:41 AM
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.
Adam LeVasseur-Arribas on 06/02 at 01:46 PM
bony on 06/18 at 03:48 PM
inchirieri auto on 06/21 at 04:47 PM
Jens on 06/25 at 04:56 AM
$(window).load(function () {
// run code
});
Scott (Filament) on 06/25 at 09:30 AM
Jens on 06/25 at 09:44 AM
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
}
);
}
});
});
supermegapollo on 06/26 at 02:54 PM
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.
Blake on 06/29 at 10:15 PM
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.
JAH on 07/03 at 05:56 AM
bijuterii on 07/08 at 04:29 PM
$(window).load(function () {
$.preloadCssImages();
});
JAH on 07/09 at 03:11 AM
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/"http://www.filamentgroup.com/examples/preloadImages/images/icon_product_wireless_lrg.png
Tomas J Stehlik on 07/14 at 10:31 AM
Taylor Kearns on 07/18 at 09:44 AM
Alesandra - Bucharest on 07/24 at 05:49 PM
Great idea! I am going to try using your script on one of my oldest clients website, I hope it goes well.
Inchireiri de masini on 07/28 at 03:46 AM
Jucarii on 07/28 at 04:04 PM
Lee on 08/06 at 01:10 AM
gps on 08/13 at 08:51 AM
اغنيه مسلسل امراه واخرى on 08/19 at 07:43 AM
Alexa Popa on 08/21 at 04:12 PM
JD on 08/26 at 07:18 PM
Dan on 08/31 at 11:06 AM
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.
rjl on 09/04 at 09:25 AM
Cheers man!
josh on 09/07 at 09:25 PM
Jucarii-Jucarii on 09/08 at 07:43 AM
cazare bucuresti on 09/09 at 05:00 AM
director web on 09/09 at 05:03 AM
Mark on 09/16 at 11:06 AM
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
FinalChaos on 09/18 at 12:49 AM
$(window).load(function(){delayed = setTimeout(function(){$(’#statusBar’).fadeOut(’slow’);$(’#textStatus’).fadeOut(’slow’);},3000);});
FinalChaos on 09/18 at 01:07 AM
inchirieri masini on 09/27 at 03:25 PM
jucarii on 10/02 at 07:06 AM
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
HP on 10/08 at 01:48 AM
Case Vacanta on 10/19 at 03:58 AM
Forum rent a car Bucharest
Alexandra on 11/16 at 06:49 AM
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.
Daniel Böttner on 11/23 at 07:35 AM
Imobiliare on 12/01 at 06:41 AM
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.
Al on 12/28 at 04:58 PM
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?
Feiron on 01/07 at 06:49 PM
God Bless!
tratament impotenta on 01/22 at 04:06 PM
does anyone has the same issue?
tratament sperma on 01/22 at 04:45 PM
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
martin on 02/15 at 07:20 AM
Tim on 03/09 at 12:35 PM
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
Attiq on 03/10 at 12:49 AM
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…
pascal on 03/16 at 09:14 AM
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.
swink on 03/25 at 12:50 PM
Liam Bailey on 03/28 at 06:05 PM
Erez on 04/12 at 06:43 AM
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
Images/img1.jpg
</div>
<div class="panel">
Images/img2.jpg
</div>
</div>
Pandiya Chendur on 04/13 at 01:43 AM
Cheers.
Cristian on 04/30 at 05:59 PM
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!
Julian on 05/10 at 06:51 AM
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.
Sean on 05/23 at 12:27 PM
Btw, this nice trick!
Samson Delila on 05/27 at 01:47 AM
ladz on 06/04 at 04:21 AM
Toshi on 06/17 at 05:02 AM
jucarii on 06/19 at 09:28 AM
heath on 07/09 at 08:23 AM
bijuterii on 07/18 at 12:37 PM
Any ideas to fix this
Shobhit on 07/19 at 04:40 AM
(function($){
plugin code ......
})(jQuery);
This will prevent conflict with other module that use alias for jQuery.
Kurund Jalmi on 07/24 at 03:34 PM
Anuja Satardekar on 07/27 at 11:48 PM
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.
J.B. Fidelia on 08/07 at 10:52 AM
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/"images/icon_product_wireless_lrg.png</li>
" - quotation mark missed in the PHP?
Cheers
P
Paul Wootton on 08/08 at 01:01 PM
The post has been mangled.
<quote>"</quote> perhaps?
Paul Wootton on 08/08 at 01:02 PM
Sry - not used to the board
P
Paul Wootton on 08/08 at 01:03 PM
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);
Luuk Lamers on 08/18 at 05:01 PM
$.preloadCssImages({statusTextEl: ‘#textStatus’, showPage});
Why syntax like this is not working?
Drink86 on 08/23 at 04:55 AM
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/"images/icon_product_wireless_lrg.png. No images loaded.
IE7 and Opera woks fine.
Please take a look.
Achim Schmeer on 09/14 at 07:47 AM
Arquivo-fonte: http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v5.js
Linha: 88
Wellington Torrejais da Silva on 09/15 at 08:55 AM
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}
Tina on 09/20 at 11:01 AM
thanks alot
mohammad reza on 09/23 at 12:34 AM
izo on 09/24 at 09:52 AM
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?
chris on 10/06 at 09:16 AM
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/#commentNumber151
chris on 10/06 at 09:55 PM
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
p90xsupplier2010 on 10/17 at 11:39 AM
the problem is present when loading external resources.
I’ve solved:
if(baseURLarr[2] == document.domain && (sheets[sheetIndex].cssRules || sheets[sheetIndex].rules)){
Pacone on 10/20 at 04:02 AM
شكشكه on 11/03 at 10:31 PM
Jucarii Copii on 11/18 at 08:45 AM
Watch Source on 11/21 at 10:26 AM
moncler sale
cheap moncler coats
discount moncler jackets
north face sale
cheap north face jackets
the north face outlet
cheap north face
cheap moncler jackets on 11/29 at 08:59 PM
kerb on 12/05 at 04:20 PM
Is it possible to use the script on a specific stylesheet? or directory? Any help would be much appreciated.
Lance on 12/08 at 05:21 AM
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();
------------------------------------------
Gavin Dibley on 12/12 at 08:03 PM
Schuhe Girl on 12/20 at 09:39 AM
awesome
Dave on 12/23 at 11:31 AM
thanks for sharing.
take care.
cryoffalcon on 12/25 at 04:38 AM
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!
SPNTFW on 01/09 at 01:40 PM
http://www.ajaxshake.com</pre>
Ajax Examples on 01/17 at 09:34 AM
if(!img.complete){
to
if(!img.complete || image.readyState === 4 ){
to deal with images that have already been cache in IE
syamadas on 01/24 at 12:30 PM
if(!img.complete && image.readyState !== 4 ){
syamadas on 01/24 at 12:32 PM
RCA ieftin on 01/24 at 05:03 PM
Bebeshopping on 01/26 at 01:12 PM
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){
GetTheJawsOfLife on 01/27 at 04:06 PM
Oanasoft on 01/29 at 03:40 AM
Bebeshopping on 01/29 at 03:53 AM
Bebeshopping on 01/29 at 04:10 AM
thanks for sharing.
cryoffalcon on 02/04 at 12:57 AM
deepak sharma on 02/09 at 07:18 AM
:-)
jonathan on 02/14 at 02:58 PM
Pissed off on 02/15 at 08:08 PM
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
Ben Foster on 02/17 at 10:43 AM
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?
Paul Hayes on 03/01 at 08:13 AM
var hostName = [removed].hostname;
Should be:
var hostName = window.locati on.hostn ame.hostname (if it doesnt strip it again)
Gavin Dibley on 03/04 at 01:30 AM
TemplatesRule.com on 03/05 at 08:20 AM
inchirieri masini on 03/05 at 08:48 AM
racing games online on 05/04 at 05:15 AM
classifieds on 05/13 at 05:44 AM
thanks alot :$
توبيكات ملونه on 05/13 at 08:29 AM
Roger on 05/21 at 10:06 PM
مسلسل بوكريم برقبته سبع حري on 05/21 at 10:12 PM
Ed on 06/20 at 01:45 PM
bryan on 06/26 at 11:15 AM
bryan on 06/26 at 11:15 AM
bryan on 06/26 at 11:17 AM
Betting Bonus on 06/27 at 01:52 PM
New Bonus on 06/27 at 01:53 PM
Pariuri sportive on 06/27 at 01:55 PM
asigurari locuinte, case on 07/01 at 09:09 AM