FancyBox & IE Nightmare

Hey Tech Folks, I would like to share something with whom interested in jQuery and FancyBox.

Recently, i was working on a project Mubasher in which i used FancyBox which is a jQuery plugin for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. I really liked the style and how easy it was for me to make pop-ups, transition effects, handling events, etc.

After successfully launching the web site, lots of people complained that on all IE versions the site hangs for about 2-3 seconds which results in:

• Pissing off most the visitors because most of them are using IE (Unfortunately).
• Decrease the rank of the site as the site performance is bad.
• We didn't get the right conversion and in-site transitions as we expected as the home page was pretty slow.

After many hours of investigations i figured out what is the problem. The problem was that inside the FancyBox CSS code, there are some styles for IE which uses the "AlphaImageLoader" the trick here is that, the paths you specify inside the image loader is relative to the root of your website, not relative to the style sheet.

So, when the user opens the site, the "AlphaImageLoader" tried to relatively load the images i specified in there, but it couldn't which for a 12 images to be loaded this way will take the 2-3 seconds (the time the requests returns 404).

The resolution of this issue is simple, either you use an absolute paths inside the "AlphaImageLoader" or get rid of the it at all if you don't use transparent and round corners of your pop-ups(this is my case) or take away the css from the style sheet file, and put it inside your dynamic page (JSP for example) and build the path of the images dynamically using "<c:url>".

I wish this will help someone someday saving lots of time getting wasted.