I've been looking for a tutorial for an image preloader!

Thanks!

Glad to hear you guys like it, thanks!

I finally have a web host again, Trap17!

So I have posted a working sample of this script on my site. The sample is just a rough copy sample, once I get my site integrated with Trap17 the sample will be a part of my actual site.

View the Sample Progress Bar Here!

Enjoy!

Hi,

Very nice tutorial; much appreciated. In particular I like the CSS progress bar.

One minor problem though. The sample link works just fine in Firefox and IE, but doesn' seem to be working properly in Safari (Mac). According to the browser status bar, it it is pre-loading the images, although no visual progress is shown in the progress-bar. After pre-loading is done, it just stays on the pre-loading page. The only way to advance is by clicking the "Skip Intro" link.

Any ideas?

Kai

Thanks very much for this tutorial. I have seen others but thay have not worked as well or look as good as this script. I am astounded you are willing to provide this script for free, as I have seen others on the Internet costing upwards of $10. Thank you very much and good luck with any more coding you do!

Thx for the input and I'm glad you liked it for the most part, but I have never had the opportunity to test or even view this script on a Mac. I am guessing Safari handles the DOM differently than other browsers... Now that I know there is a problem with Mac's Safari browser processing my script I will look into resolving the issue (and here I thought it worked perfectly! lol).

I am glad you pointed out the actual problems for me, which makes fixing it one step easier! I will reply as soon as I figure out a solution. Hopefully you can test it out again for me on your Mac Safari!!




I couldn't imagine charging people money for my tutorials (they probably wouldn't get read!), I mainly write them so that I can add them to my Resume/portfolio, maybe they will help land me a job!

I'm especially glad to see such positive feedback from this tutorial (makes me want to write more)!

Just let me know if you would like me to do any further testing, or provide additional info if needed to make your job easier to find a fix.

~ Kai

I haven't figured it out yet

Mac confuses me

Do you know any Javascript at all? It sounds like a few javascript functions are not being recognized by Safari, amd I am having alot of trouble finding out which ones.. Theoretically, it should work fine, unless Safari browsers haven't followed basic standards for DHTML..

Maybe it has to do with it being on a Mac? Did you test it with IE and Firefox from Mac too, or was that on Windows?

I am almost at the point of resolving to detect the Safari browser on Mac and just skip preloading altogether, so it doesn't cause problems...

Well, ima keep looking for an answer, wish me luck!

Well i will check this out ...processing on the client side free's up the server and this script can come quite handy on slower connections ...

Thanks m8, if it works wrong i will came back to you for help

Best Regards

Nuno

Hi

In fact, the problem is that Safari seems to not support self-reference in javascript class.
The two last variables in ImagePreload.prototype.OnLoad are marked as "undefined".

For those who wants to debug in Safari with MacOS, type "defaults write com.apple.Safari IncludeDebugMenu 1" on a terminal and then restart Safari. A "debug" menu will be present on the top of the screen.

I think it's a safari bug, but it should exists a workaround.

Regards,
Riton

Oh, this is a very interesting code, yet really long I'll try to give it a look patiently this weekend and see if I can follow all the steps.

Thank you for sharing it.