THIS POST IS NOW DEFUNCT SEE
http://binarykitten.com/dev/371-jquery-image-preloader-update.html
Hi all, After comments on the previous version by Roberto, I looked into creating callbacks within the code so that it can be used in the way that Roberto had outlined, also I used it as a way to improve my knowledge a little.
After a while I got stuck and figured out a potential method thanks to ai-a in #Javascript on UnderNet, then I spoke to Remy Sharp on Twitter and always being impressed with the work he does on his site (http://www.jqueryfordesigners.com) I asked politely if he would give my code a quick look over. He did so, and so much more besides.
So I present to you now v0.95 of the Image Pre-loader which is now Split into 3 functions (rather than the 2 from before)
So the main functionality is the same as the one from http://binarykitten.jkrswebsolutions.co.uk/2009/01/06/jquery-image-preloader/ but now has the following functions
- $.preLoadImages – Preload the passed list of images, calling the passed call back function when all images are preloaded
- $.preLoadCSSImages – Preload all images found within the stylesheets of the document, then call the passed call back function when all the images are preloaded
- $.preLoadAllImages – Processes the stylesheet images and then if passed additional images, will process them too. When all are complete will call the passed callback function.
Here’s the actual code now for the plugin:
Hopefully you have found this useful, as usual.. comments gratefully received.
That’s great, Kat! Thank you so much for giving attention to my requests. I’ll give it a try and post some feedback.
Great work! So easy to use..
Thanks
will check this out… it will be great if it will work in ie678 opera 8+ safari 2+ chrome 3.0 and ff 2+
Very nice, any chance you will compile using google closure.
not looked at google closure yet for compiling.. but will do.
Should work in all browsers.. if it doesn’t please do let me know
I keep getting this error while trying to preload CSS images. Kind of a noob… Is there something I’m supposed to customize within the plugin?
Error: missing ) after condition
Column: 41
Source Code:
if (typeof sheet.href == ‘string’ && sheet.href.length > 0) {
those ampersands and that greater than symbol were supposed to stay in html. arg
There is a problem concerning css preload, firebug spits out the following url:
http://somehost.com/css/%22../images/some_image.png%22
which should look like this:
http://somehost.com/css/images/some_image.png
are we supposed to use absolute paths in our css stylesheets?
got it, just append a substring to get rid of the quotation marks..
thanks for pointing this out, Will update for the next version.. (coming soon)
excellent script, but there’s another thing. i get a 403 error while trying to get attached css documents when testing it online.. no problem locally though..
Hey, when using @font-face and loading a font file in the attached CSS-Stylesheet, your script never fires a callback, since this if (loaded == total) is never reached, not sure why, but I dig into it.
Hey franton, what code did you add to fix your css image path problem? I’m getting the same thing.
has problems with ie6 and 7. it seems to have problems with the loaded. i don’t know what specifically.
It’s because it’s trying to load the font-face url into an image. Will need to add extra validation for those specific cases where the url keyword is not used for images and filter them out. Will think how to best achieve this for the next vesion. Due soon I hope.
@Ambrosia
Put following code in Line 77
img = match[1].substring(2,(match[1].indexOf(‘)’,1)-1));
In Firefox the preLoadAllImages function works… but when I open the same page in chrome it simply doesn’t.
Stil looking what the prob is.
Seems great. I will test this
This is what Firebug tells me, and also the IE8 javascript error alert.
Security error” code: “1000
[Break on this error] myRules = sheet.cssRules ? sheet.cssRules : sheet.rules;
preloadimages.js (rad 50)
Would processing be any quicker if I did not need to preload stylesheet images?
@Riball I’m having the same issue. I don’t suppose you ever found a fix?
I doen’t get the Alert from the callback of preLoadAllImages (others are untested at the momen).
@Kryptic: thx, your solution worked!
thx for this good script!
I have something different.. I can’t get the preloader to work on firefox :/
It works on IE, Chrome, Safari, but I dont even get the alert on firefox
Thanks for this article…
it will be useful for me
let me save this page…
just for offline
so i can read this at my home
So by this comment, i say thankss for your great article
This works great, except my images seem to be loading out of order from the array I pass… is there a way to force it to go sequentially? Thanks!!!
@stefan, did you ever find a solution to your problem, I’m getting the same thing.
unfortunately they load in the sequential order, but when the loading is complete is down to the actual browser, so unfortunately there is no way to schedule that.
We will see many of these with HTML5/CSS3 not only jQuery.
Thanks for this code. Good Jobs!
[...] enfin voici une des nouvelles librairies donc nous avons parlé en début d’article. jQuery image Preloader Plus Callbacks est un plugin JQuery qui permet de faire du prêt-caching des images de l’application. Son [...]
doesn’t work
would you like to elaborate on this? stating it “doesn’t work” doesn’t help to get it fixed.
[...] enfin voici une des nouvelles librairies donc nous avons parlé en début d’article. jQuery image Preloader Plus Callbacks est un plugin JQuery qui permet de faire du prêt-caching des images de l’application. Son [...]
It doesnt work for me, Dreamweaver reports a syntax error on line 65, thank you
Good functions, much help for me, but no callback if imageList is undefined or empty. In my project I want to get callback in any case. I modified code a little.
function preLoadImages:
…
// Outer if
if (typeof imageList != ‘undefined’ && imageList.length > 0) {
…
}
else
{
if ($.isFunction(callback)) {
callback();
}
}
pic = undefined;
…
The same modification with other functions.
Sometimes WordPress turns the && into other html code. it has now been fixed
Any word on preLoadCSSImages and relative image paths in the CSS? I am seeing the following in Firefox: http://localhost/css/%22../images/overlay.png%22“. It should be http://localhost/images/overlay.png. Any ideas?