Introduction
This is an advanced multi-functional preloader, that has 4 modes integrated. Each mode suits a different, common situation.Modes and settings
The modes are:URL
Preload a JS array of static URLs.
related settings:- base: This string is prepended to the URLs.
- ext: This string is appended to the end of each URL in the array.
Rollover
Preload based on DOM images, slightly modifying their src. Can be used for rollovers, or for image-thumb.
related settings:- find: String or regex that matches part of the srcs.
- replace: Replacement to the matched part, to generate the alternate URL.
Placeholder
Take regular images and set a placeholder image while they load. Show each original image when fully loaded. Allows sequential loading with a threshold.
related settings:- placeholder: URL of the temporal image shown while loading.
- notFound: Optional image to show if a given image failed to load.
Link
Preload images that appear in the href matched links.
related settings: none.
Placeholder+Rollover Mode
Since 1.0.6, you can combine these 2 modes, for another common use.If you have many images in a page, you might want to load a lighter version of them first, and then sequentially load and replace the real images.
To achieve this, use the light versions in the html, then preload the heavy ones as if they were rollover images(find+replace).
If you set 'placeholder' to true, each preloaded image will be set instead once it loads.
Callbacks
The hash of settings can also contain callback functions for 3 important moments of the preloading proccess.They receive a hash of data, with information about the related image and the overall process.
The callbacks are:
onRequest
Called when requesting a new image.onComplete
Called when a request is complete.onFinish
Called when all images are fully preloaded.
Hash of data for the callbacks
The first argument of the callbacks will be a hash.It contains the following information:
loaded
how many images were preloaded successfully.failed
how many images failed the preloading.next
0-based index of the next image to preload.index
0-based index of the current image.done
amount of preloaded images ( loaded + failed ).found
whether the last image could be preloaded or not.total
amount of images to preload overall.image
URL of the related image.original
The original source related to this image.
Troubleshooting
IE throws a "stack overflow" error.
I worked around this limitation of IE on 1.0.6.
If you still get this alert, you'll need to modify $.preload.gap, which is 14 by default. Reduce this number by 1 until it works. You need to exit the site each time, to be sure it works.
Try not to touch the original code, modify it from the outside.
I have many images and they seem to get un-cached
Try setting the option 'enforceCache' to true (+1.0.8).
143 comments:
i'm experiencing error using the URL mode, my code is pretty simple as follow:
var urls = [ 'sfondo', 'sfondo_nav', 'logo_piccolo' ];
$.preload( urls, {
base: 'images/',
ext: '.gif'
});
firebug find an error inside (your) preload's script: callback is not a function
clearly jquery and preload are correctly included.
can you give me any help?
Hi robocop
There's no callback() inside the plugin that could cause that.. maybe jQuery.Preload is giving something wrong to jQuery...
Do you have a demo I could see ?
If you can get any, please use the uncompressed versions so I can debug it...
Cheers
the error derives from a callback in jquery, this is what i see...
btw
here is where you can debug
there are the uncompressed versions of jquery and preload
thank you
Hi robocop
I see now that an optimization I added in the last release(1.0.2) is not compatible with jQuery 1.2.2 and higher (since jQuery.map got modified). Please use jQuery.Preload 1.0.1 instead.
I added a note in the project page, with a direct link to the download.
Thanks for finding out!
Cheers
i really have to thank you for help and for this useful (for me at least) plugin!
cheers
Thanks for this fantastic plugin – unfortunately in Safari 3 the onFinished callback does not work at all. The demo page doesn't even get displayed.
Thanks for your work, maybe you could look into these issues and make the plugin even better!
w
Hi w w
I tested the plugin and the demo specifically, in my Safari 3 beta Windows and it works well.
Are you seeing it on a Mac ? which demo can't you see ? all four ?
If you tried it.. which release did you take ?
Thanks for your feedback
Hi,
sorry, it does work.
For some reason I had an empty element at the end of the images array – which (only in safari!) prevented the onFinished-callback to be called. My bad. Sorry!
WW
The URL preloader doesn't seem to work in safari 2.0.4. It just hangs and continues to show the loading div .
Any help would be great! Thanks.
Hi
Safari 2 is killing me, I can't try on it because I'm on Windows.
I posted in jQuery Development, hoping to get some help:
http://groups.google.com/group/jquery-dev/t/6a4bf8a6344de44f
Cheers
Hi!
I have one question.
How i can use your plugin for this situation:
$.preload('.itemText img', {
onFinish:splashScreen,
threshold:2
});
What i must writing for adding array or urls of two images to preload inside the plugin?
Sorry for my english! =-)
Hi GrigorievK
You don't need to apologize here.
I didn't fully understand your case.
You want to preload 2 images, that are already in the page ?
Or an array of urls ? Or thumbs ?
Give me just a little more detail and we'll solve it.
Cheers
Excuse me. I have already found the decision. I did not need to disturb you.
Fixed the issue for Safari 2, please upgrade :)
Hello Ariel, thanks for this great plugin. I'm using it flawlessly in Firefox, but I'm having problems with IE7 and IE6:
IE7, using the "min" version gives me:
Stack overflow at line: 10
IE7, using the source version gives me:
Stack overflow at line: 90
IE6, using any version:
Stack overflow at line: 0
Right now I don't have a demo to show you... but do you have any idea about what's happening?
Hi Feed
I got a similar report, but I can't reproduce it, does it happen in the plugin's demos as well ?
Try commenting in the source version, line 89:
imgs.unbind('load')..
Please let me know what happens.
Hi Ariel.
No, in your demos everything works properly!
I commented line 89 as you suggested, not both IE6 and IE7 show this:
Stack overflow at line: 0
Well, but apart from this problem, I have another suggestion :)
Currently when using you plugin the images don't get cached. Is there a chance that you'll add an option to control this? cache: true|flase, something like that?
Thanks in advance.
oops... I made a typo...
I meant this:
"I commented line 89 as you suggested, NOW both IE6 and IE7 show this:
Stack overflow at line: 0"
Hi Feed
Images do get cached, that's the idea of preloading.
Do you have any IM ? If you do, mail it to me and I'll contact you.
My email is in the header of the plugin.
Cheers
@Feed
Patched IE's bug in 1.0.6, please update. Also added more things, check the changelog.
Cheers
Nice tool, but I'm missing the onError and onAbort handlers..
onError is used, if you use the onComplete event of the plugin, the data will include 'found' that will be true or false whether it loaded or not.
I never heard about onAbort before, added it to a new release.
Thanks!
i noticed that the URL mode in the Opera browser (Firefox and IE are ok) doesn't seems to work fine: some images are loaded (and displayed) but never all.
the code is:
$.preload(imgs, {
onComplete: function(data){
$('img[id^="imgpos"][src="' + data.original + '"]').fadeIn('slow'); },
onFinish: function() {
$('#loading').fadeOut('slow'); }
});
Hi Robocop
I tried the demo on Opera 9.22, and it works well. Maybe there's something wrong with the images you are loading. Do you have a link to what you are doing ? or a demo ?
Cheers
here it works fine, there are 2 images to be preloaded.
while here there are 5 images and only 1 seem to be preloaded (and displayed) and if you click on a product category (below 'Prodotti') you will see that one image is always loaded
the script code is the above one (last post)
my opera is 9.24
Indeed Robocop,
It does get stuck on the third in my Opera.
Can't give this a deep look, I will tomorrow. Your situation seems more like the Placeholder mode.
You should try using it instead, this might get fixed.
I'll check soon.
Cheers
the situation is: with the url mode the images are preloaded, the img tags (initalli not visible) relative to the images loaded are the showed
the placeholder mode doesn't fit right for this situation because only some img tags (not all) are preloaded
thanks anyway!
Hi
You can decide which images are included in the preloading...
You can use any selector you want...
hi ariel,
is it possible to combine the link mode with the placeholder?
i'm using it like this, but the placeholder doesnt show up:
var $links = $('#thumbnails-objectdetail a');
var $preview = $('#titelbild');
$links.preload({
placeholder:'/default/placeholder-thumbnail.gif',
threshold:2
});
$links.click(function(){
$preview.attr('src', this.href);
return false;
});
Hi Stefan
Why would you use 'placeholder' with links ?
That options sets a temporary image to img tags while they preload.
I don't see the point of changing the url of a link.
Could you give me some more details or preferably a demo of what you're trying to achieve ?
Cheers
uhm, you are right. this makes no sense at all, hehe.
what i wanted to do:
i have a div which shows the big image and a div with thumbnails in it. when the page loads and the big images are preloading, the according thumbnail should show the placeholder.
is this even possible?
You can use the Placeholder mode, that would set all the thumbnails to show the placeholder.
If you want to set it to one at a time, you'll need to add some coding with the onComplete/onRequest events.
Hello Ariel,
Thanks again for releasing the preloader.
I stumbled across the stack overflow problem with IE, though I did look at the documentation and decremented the "gap" variable...
even down to 1, in vain.
I tried to put to put the preloader only on few images holding a specific class :
$.preload( 'img.preload',
instead of
$.preload( 'img',
did not work any better.
Any idea what I could do next ?
Thanks.
PS :
You have the culprit here :
http://mksoft.fr/tmp/20080526/
Thanks.
Hi Sagamore
It's odd. I'm not getting any error (IE6).
The blockUI just hangs but no alert.
You have 16 images, IE shouldn't mind until 14. So try removing some (try hitting 10) and see if you still get it.
If you do.. then maybe it's something else... or the sum of many things.
Cheers
The demo site is down...
I know, trying to fix that.
Thank you very much for fixing!
is there a way to set the height and width of the placeholder image? because it looks like it is being stretched to fit the preloaded image size if the image has the width and height properties set. Tks for this great plug in
Hi Seba
The plugin only sets the url of the image.
You can change the size of the images using the "events" onRequest, onComplete.
Cheers
your demo page is up but it skips the choice of demo.
The base url redirects to one by default and you can access the rest using the links on the right.
Hi Ariel,
I am having issues in Safari 3.1.2. When I preload images, and there are duplicate images on the page, sometimes the callback function onFinish is triggered, and sometimes not.
Here is my code snippet using some images from jQuery.com:
$(document).ready(function(){
$('img').preload({
onFinish:function() {
document.getElementById("test").style.display="none";
}
});
});
span id="test" Hi there! /span
img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" width="215" height="53" alt=""
img src="http://static.jquery.com/files/rocker/images/icon_searchglass.png" width="35" height="71" alt=""
img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" width="215" height="53" alt=""
Hi Nate
Try adding a placeholder (using the setting by that name).
Indeed some browsers "forget" to trigger to onload event for cached images, and stuff like that.
Hi Ariel,
That seems to make it happen less often if that makes any sense. Once in about 25 times of refreshing the page.
When I see both images, the onFinish is called and my JS is fired.
However, there are times when one of the images is shown, and a placeholder remains for the same image further down the page. The onFinish is never called.
This is the Windows version of Safari I am using. Any help you can provide is appreciated. I'm not sure if this issue exists in Mac version of Safari.
Hi
There's not much I can do, it's probably a native thing of the browser.
I'll see if I can patch that somehow (not today of course).
Hi Ariel,
I actually think I have fixed the issue by setting the threshold to 1. The duplicate images always load and the onFinish always seems to fire. I was also experiencing the issue with Google Chrome... which I think is based on Safari.
Thanks for the help!
- Nate
hi Ariel,
i want implement a resize function into plugin during the preload.
After many test, this implement is allright for firefox, chrome, safari but not for internet explorer6/7. i can send you my implement if you get me your mail. i like this plugin you are a very good webdev.
:)
My email is on the right and on the plugin.
Hello all,
I am new in jQuery, and I would like to make some gallery example, which should work like this. I would like to ask you if you plugin is possible use also in my example.
Requirements:
I have one div with full image view. Second div with thumbnails. I will render all images in thumbnail div but when I click on thumbnail image i want change url for image in main div (it will generate new http request), but i also want preload one big image from next thumbnail. It is possible to make this with this plugin. Can you give me some link for example page of your plugin. Not only js, but also some html, because I really new in JS especially jQuery. Thanks a lot.
Dave
I have some images hidden in css with display:none;
Because of this, some browsers do not load the images. Can I preload them with this plugin?
@Dave
Probably something like this. You must have some kind of relation between each image/thumb urls.
@Anonymous
Sure... I suppose something like this should do:
$('img:hidden').preload();
That needs to be within a document.ready or after the images in the html.
Is there a way to have a small, say 2px X 2px image and tile it for the preloading image?
Not that I know of, nope.
Does this Plugin work with jQuery 1.3?
Yes, it does.
Hi Ariel,
two questions:
1) is there a way to set some kind of option (a number) so a function is triggered when an amount of images are preloaded?
Let me try to explain: I want Preload to use some kind of callback to trigger jquery.Cycle when at least 2 images (of, lets say, a set of 10 imgs) are already loaded.
Also, ideally, jquery.Preload should preload this two images (the very first two images on a list) before any others. Anyway to force that? :D
2) Is there anyway to apply some kind of transition (fadeIn, fadeOut, or any jquery trick) to the placeholder image?
Both at the start of preloading and when finishing. Or at least, when finishing...
Thanks!
Hi Julian
You simply use the onRequest and onComplete "events" to do all that.
As for the order, the images are preload in the order they're received.
Hi Ariel,
thanks for clearing things up.
I've some ideas and feature requests to share for the next version of jQuery.Preload ;).
I still have to refine them before posting.
Haven't tested this yet but about the placeholder mode, could it be used without specifying a placeholder image?
I won't be using a placeholder image, because I'm using jQuery.Preload + jQuery.Cycle, so my idea is to create a DOM element with a loading image (placed "on top" of the preloaded images) and then remove it on jQuery.Preload onComplete.
I'll post back any time soon.
Thanks again!
another great plugin from Ariel!
I already use the scrollTo, keep them coming! :D
This preload script fits my needs perfectly. I love it's elegant implementation. I've encountered an issue, however.
The basic $.preload(Urls script fires the preloading in every browser I've tested. In Firefox alone, however, after the images have preloaded, the subsequent script swapping out the srcs of the img tag on drag always grabs a new image from the server, ignoring the preloads.
The example on my site is at: http://www.chrisgove.com/eye.htm
I know this can be done on Firefox because I have previously used the preload script here:
http://blog.152.org/2008/01/javascript-image-preloader.html
One more thing... I just tested IE and turns out its having the same issue as Firefox. Your URL preloader works fine and well in Safari though.
For comparison's sake I've uploaded a test version using the old preloader from http://blog.152.org/2008/01/javascript-image-preloader.html
My application using that preloader can be found here: http://www.chrisgove.com/eye-test.htm
@Julian
Looking forward to that!
@Cuzog
I'm not sure I'm following. You expect the preloader to keep working after all were preloaded ? as in, the events (onRequest,etc) should be called when you change the src of images ?
Nope, I just expect the images to still reside in the browser memory cache so that they load quickly when called from other events like the drag in the example. With your script, Safari works as expected but IE and Firefox don't.
I'm not sure whey the other preload script works this way in all three browsers. In that script no events are fired after the images have preloaded on initial page load. Any reference to those images afterward is quick because it comes from the cache and not fresh from the source a second time.
I believe I have found a potential solution to the problem. I isolated the part of the other script that triggers the caching and reproduced it onComplete with your script.
var preload_image = new Image;
preload_image.src = data.image;
img.push(preload_image);
Example of this working here: http://www.chrisgove.com/eye-test2.htm
With this, I take a new array and push references to each of the images onto it. For some reason, Firfox and IE need a variable with the image references existing somewhere for the images to be cached for later use in other scripts.
I can try to find a way to build it into your script, but I'm sure you would probably have a much better idea of how to best integrate it.
Also, thank you for the excellent support you provide for your script!
Ok, I get you mean.
Maybe pushing an image into an internal array will do, indeed.
I'll experiment with this asap, I'm kinda busy but will do my best.
I totally understand. Take your time. I'm in no big rush. Thanks again for your help!
BTW, got a demo online that shows the problem ? I'd prefer to verify that there is an actual problem. Just to be sure.
Thanks
A demo showing the problem occurring is here: http://www.chrisgove.com/eye.htm
A demo showing my fix is here: http://www.chrisgove.com/eye-test2.htm
After the 0s turn to 1s the images are preloaded. The image of the eye can be dragged which swaps out the images in the direction that they are dragged. The images looking down from the left of the eye are the first in the array and the ones looking up from the right are the end of the array.
IE and Firefox both show the dragging is very sluggish after the preload because they grab another copy from the server.
One more thing. In the data hash I found myself needing a 0-based index of the image that just loaded in "onComplete."
So I added this variable to your data hash:
index:0,
And this line to your handler:
data.index = this.index;
This allows me to keep track of which images have already been preloaded. I need to do this because I will be resorting the order of images to be preloaded each time the view is changed. I don't want to preload anything twice when I call the preloader again.
I've been puzzling over this for a while. As the previous comment hinted at, I'm looking for a method to stop the running preload. Is there a way to stop the running preload from an event attached to another object?
For example, at http://www.chrisgove.com/eye2.htm I want to resort the preload order based on the current view. The way I'm currently trying to implement this is as follows:
1. Stop the currently running preload when the view changes. (onmousemove while dragging)
2. Then create a new order of images to preload based on the current view and excluding any already loaded image.
3. Then preload the newly sorted array.
If there is no current way to stop the preload from outside the plugin, do you have any recommendations on how to add this functionality to it?
I've found that calling $(imgs).stop(); kills the running preload most of the time. Sometimes, inexplicably, the preload keeps running anyway. I wonder if it has to do with calling when the preload is pausing every 14 steps for IE.
Is this the best way to do this? If I keep calling and stopping preload on view change, will I end up with tons of partly completed preload instances in memory?
Sorry for the 20 questions. You've really been a great help.
@Cuzog
Sorry for the delay.
Ok, first, you can't stop the preloading of one specific image. I googled that and it seems like only the user can do that with the Stop button.
You can though, avoid preloading the remaining images. You do something like this:
$.preload([....],{
onComplete:function( data ){
if( ... should abort ... )
data.done = data.total;
}
});
That function might be called more than once, depending on the 'threshold' setting (2 by default).
As for the index attribute, I added on trunk. I'm not completely sure about it usefulness, will think about this some more once I'm about to release.
Cheers
Thanks for the tip!
Turns out, what was causing it to stop before was an error in the onComplete triggered by the other event. It probably explains the erratic behavior I was seeing. The .stop() method wasn't doing anything at all in the end.
Your solution seems like it will work very nicely. I'll give it some tests and report back.
Your suggestion worked great!
I made it work by setting a conditional variable from the other event which is checked onComplete and kills the preloader as you recommended. From there the function onFinish is triggered and calls itself and another function which creates a new array with the remaining images. If none are found, the recursion is killed.
With the addition of the index attribute in your preload plugin, I would be able to publish this as a plugin: $().objectvr();
Thank you so much for the help. Your nudge in the right direction really helped achieve everything I wanted with this app.
I'm curious as to how they manage to load the entire content of the webpage at Typeneu.
They use your plug-in, but how do you go about loading the entire content in the preload?
It seems to be commented out right now. They were using the placeholder mode.
I see, but it's the same function at Reform & Revolution
It would be awesome if your plug-in had an example of how to do this!
Just want to let you know the preload does not seem to work in Chrome in regards to teh placeholder option. It will display the first image but then it just shows the placeholder image for everything after that. This is on jquery 1.2.6
My demo seems to work fine on Chrome (last build).
Great plugin! One question. How do I actually know that my images have been preloaded?
Check the section about callbacks. There's onFinish.
I am having a few troubles when using the plugin. First, I am using the plugin in link mode. I am loading about 55 images, so that when the user rolls over the links, the images will show for that link. But, when rolling over the links, the images appear with a delay. But, once that link has been rolled over, it is very fast to go back to it.
Second problem, sometimes the images used in the above example only half load, resulting in an image that looks like half is missing, but just has probably not loaded.
Demo: http://67.207.148.241/home (Roll over "Artists" menu)
Seems like they get un-cached. Could be because they're many and not kept in the page.
Try updating to 1.0.8 and add the setting 'enforceCache' as true.
Thank you for the wonderful additions in 1.0.8! They work great for my code.
I can't get it work for love nor money. Does it work with the latest version of jQuery?
@Missy
Got a link to a non-working demo ?
I think it's a conflict with another jQuery script I have in the same page; I'm going to set up another test page later (leaving the other script out) and see if that resolves the issue.
Will keep you posted...
is there a tutorial for this anywhere? i'm not quite sure how or if i need to change the code to fit my page. I want to use it for rollover images.
http://www.tandemliterary.com/development
@Kristylee
This blog post is the tutorial, actually the documentation.
It's pretty easy to use if you learn the settings. Your code will probably look similar to the one in the demo but you need to tune the find/replace settings.
ok those are in the sample code? i'm assuming i write this and add an external script. i'm reading over this page and i'm sorry, but i'm missing something.
Yes, just setup the selector, find and replace.
why does it say 'replace'? will this still work with background images?
Replace is the setting's name...
And yes, you can preload images that you will show as background images, but it won't "read" image urls from elements with background images. Just images and links, not sure what you meant.
So if the image I'm attempting to do a rollover with a background image, it won't "find" it to replace it? I have this script installed and it is not working. But this would explain why.
I would like to just add the images into the cache straight. Is there any way to do this?
http://www.tandemliterary.com
(see navigation, css background images with hover property)
In order for it to work, you need to set the image within the img element not as css background.
If you don't want to do this, then preload them "by hand" using the URL mode. Give the plugin an array of image urls and it will preload them
thank you for your help!
nice i will use it in my site! thanks!
Can you explain what differences make if I use this plug-in?
I understand the meaning of preloading, but what kind of situations should I use this script?
You preload images that will be shown later, this avoids the delay that is seen when showing them otherwise.
Hi Ariel, first of all : thanks for your work always more than helpful for web designers :^)
So, something's going wrong with Opera (Mac or PC version) and your preload plug-in. Opera won't display replacement images if threshold option is not set to the exact value of all elements affected by preload. It then displays all other images without preloading them...
Preloading works perfectly on other browsers.
Here's a complete demo (i modified original images sources to test the replacement image, and threshold is set to 3 for this example) :
http://sebastien.vaneyck.free.fr/book_v5/index.php?section=portfolio
Thx in advance :)
Woops, forgot to tell : click on the right arrow button (or the right arrow key of your keyboard) until the fourth image to see what goes wrong.
Thx again ;)
@Zeb
The images seem to be failing 404. That should be the reason. Try adding an image url as "notFound" setting and you'll see.
Well, refering to a fake link for the final image was the purpose : displaying the preloading image. Locally or even online, loading final images is too fast to test properly your script :)
Anyway, i was just curious that (only) on Opera, all "loading" images weren't displayed. But maybe this is not how the script works and it needs real href links to work properly on any platform.
Anyone knows a good way to slow down an internet connection ? (except uploading torrents in the same time, that works a bit)
Try using 3mb images, that should do :)
Ah ah, that should help but i'll go for a 15Mb image (my connection is ; unfortunately for once ; quite fast).
Thx again for everything :)
Maybe I don't understand the purpose of this plugin, but when I use it in URL mode as follows:
$.preload(['bubbleTop', 'bubbleBottom', 'bubbleLeftSlice'], {
enforceCache: true,
base: '/gr/',
ext: '.gif'
});
the 3 GIF images show up as little image placeholders, or don't show up at all for a second or two, before being replaced by the proper image. This happens in Firefox/Mac and Safari/Mac. I'm loading jQuery and the preload script first thing inside the head tag. I've checked the loaded and failed count and they are 3 and 0 respectively, so the preload function thinks it's working.
Any thoughts?
@Joe
One preloads images to be used later, there's no gain on preloading images on the DOM.
Hi Ariel,
I have strange bug on FF3.5.2 (Safari is fine). When preloading in placeholder mode the image doesn't appear and replace placeholder after loading is done. It appears when swapping tabs/resizing browser window.
http://pavelrisenberg.com/dropbox/bernaskoni/html/www.html
Example is pretty complex, but nothing changes when I comment all other functionality.
Uhm.. I can't seem to reproduce it, could you try to isolate the problem into a smaller example ?
Hm, bad, it's working now. It wasn't working when image wasn't in cache yet (first page load with empty browser cache), but now seems okey.
The thing is here only when refreshing with Ctrl+Shift+R.
Anyway here is simplified example
http://pavelrisenberg.com/dropbox/bernaskoni/htmlmin/www.html
Hi Ariel,
is it possible to preaload css-background-images, too? Or, do you plan to able your plugIn to do that? I search for a "site-preaload"-plugin. Like the preloader-functionality on flash-sites. Maybe you know such a plugin. Thanks for that cool plugin.
Regards arno
@senpi
The link is 404.
@Pottwal
This plugin doesn't handle css backgrounds, but I'm sure there was a plugin for that.
Hey Ariel,
This is an awesome script great work on this. I am actually trying to use the URL. It looks like it only supports one ext? say I want 2 png and 1 gif how should that be implemented any idea??
Thanks a lot for the script it rocks
Thanks
David
Then you don't specify any "ext" and put it on each item in the array.
I guessed it. Thanks a lot for continuous support and great code btw.
Thanks
David
Hi Ariel,
do you have any complete documentation and sample or demo I could download ?
@donkey
The documentation is this post, and demos you have those linked from here. You can do "Save as" or "View Source".
Thankx for the contribution...would be more than happy to bounce back a paypal bump for a comment or two on this...
I'm asked to implement a rollover menu created by Fireworks - a 'Swap Images' behavior. The graphic artist went overboard with the graphics size-wise and wowed the boss. Now I need to make it usable.
I'd hate to start from scratch and do everything the jQuery way and searching 'jQuery's preloading' led me here. The question boils down to: can I merge your preloading code with Firework's so as to replace a low-res thumbnail until the bigazzed 'jpg' is loaded? Happy to pass along a viewable demo privately if you haven't encountered the stock Fireworks behavior before.
many thankx
Hi
Ping me by email with a demo and I'll check.
Hi ariel, i just test it on Safari 4 the preload is not working. so do you have any idea?
@Sokranupheap
Preload works for me on Safari 4 (at least on Mac Léopard).
Hi Zeb, yeah but i use the Safari 4 on windows vista os. and it's difficult to bug it. so have anyone help me?
@Sokranupheap
Ok, i just tested on Windows Seven with Safari 4. And still no problem, my implementation of jQuery.Preload works perfectly.
So, two things :
- activate the develop menu in Safari (u can activate it in preferences > advanced, and then find it in menus) to check javascript errors or activity.
- post a link to your project or demo, and then we could maybe help you better.
Cheers ;)
Hi ZeB, i have one more question how do i stop and restart the preload process?
thanks for your help.
@Sokranupheap
Well, this is not a slideshow process, so i never had to stop, pause or restart it...
Ariel, as the creator of this plug-in, will be more helpful than me in your case. Still, post a link to a demo : it would help us to understand your problem.
Oh, sorry ZeB i didn't have the Hosting to show you a demo. my objective is to do a slide show with slide transition effect. but when i click next image while preload processing it's quite slow that it make my CPU performance process almost 100% until the preload finish.
Ok, so use the event "onFinish" to solve your problem.
Then, when all images are fully preloaded, start your slideshow.
(tons of free hostings exist, you better take one to test your script in real conditions)
Ok thanks ZeB for your help.
@ZeB
Thanks a bunch for helping :)
You are awesome, thanks for the plugins!
Thanks! :D
Hi Ariel,
Thanks for the great plugin.
I am using it in link mode and somehow the first image does not appear when arriving to a page. All the images appear on mouseover...
I am in FF 3.5.2 Any clues?
TIA
FYI, I've found that if there are duplicate links, line 119:
( data.next == data.total ) never evaluates to true and the OnFinish callback is never called. I don't understand enough to know if it's benign or not but I thought you might be interested in this edge case.
Thanks for the plugin.
Hi,
I need to change the body backgroud image on an href click. What should I do to preload those images properly with your tool and set tham as new body background in a second time?
I'm not that confident with JavaScript, I've Just tried this way (but it seams to me it did not work):
jQuery(function( $ ){
var urls = [ 'pisa' , 'roma' , 'milano' , 'venezia' , 'firenze' ];
$.preload( urls, {
base:'imgs/',
ext:'.gif'
});
});
Should I append those images to a div and use divs instead of body background?
Here is my test.
http://www.discacciatipietro.com/tests/memini/
Thank you so!
P.
I have a problem with Firefox and even Cuzog's solution doesn't seem to help. The website I'm working on is at http://www.infotop.rs/devel/. Once you are done with the intro, there are two slideshow-like animations that are supposed to preload images. Preloading works in Chrome, IE and Opera, but not in Firefox. I'm using Firefox 3.5.7 on Windows.
Any ideas?
Do you have a example code for the finish callback?
Thank you, Ariel!
Hey, you can check out a great jQuery Preloader that I wrote with full callbacks, auto reading of images to preload, and a lot of easing in animations. Check it out here: jQuery Preloader
This script is great! Thank you!
I know that the hover portion of your demo (below) isn't the primary function of your script (since it's actually different code that runs the roll-over effect).
http://demos.flesler.com/jquery/preload/rollover/
But I was wondering how you would modify the roll-over script using the img element with different src attributes to work like these:
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
http://greg-j.com/static-content/hover-fade-redux.html
Hey Ariel,
Good job.
Is it possible to preload .mov files with your plugin?
Best,
Alexander C.
This could really use iterations in the callbacks.
Or maybe they are there and im just kinda dumb.
Hi,
how can i fadeIn each loaded image?
this is what i use for:
$('#masonry img').preload({
threshold: 3,
onComplete: function(data){
$('whic_image_to_fadeIn???').fadeIn('slow'); }
});
what should be instead of:
'whic_image_to_fadeIn???'
thanks for your help and for great scripts
Although this hasn't been updated in years, I believe I found a fix for the Chrome issue mentioned by Anonymous March 9, 2009. It is that the .load function is not triggering in Chrome for images that are already cached (a recognized problem with .load), such as if you are loading the image more than once per page. The fix is simply to put this conditional at line 123 after "img.src = sources[data.next++];":
if (img.complete || (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6)){
$(img).trigger("load");
}
Post a Comment To get help prepare a demo.