How to force a lightbox to load first.

October 1, 2007 1:21 PM

Looking to add lightbox functionality to my website, but one big problem seems to stand in the way.

I've decided to start cleaning up my t-shirt website (which I made two years ago after about a week of trying to teach myself GoLive from scratch. In other words I did pretty much everything hamfisted and wrong, but it more or less works as intended).

One little addition, besides cleaning things up, I was hoping to make was the inclusion of lightbox for my image enlargement needs (I'm going with lightbox2, because it was the only one I could find that didn't seem to have IE bugs when used on my page).

I've already set that up for my main display pages, but once I got to my product pages I ran into a snag. The product assortment is loaded through an iframe that houses my Spreadshirt back end. Loading this iframe can be a doggedly slow process (and one that, from what I understand, spreadshirt plans on improving soon).

Anyway, the problem is that the lightbox doesn't work until the iframe has finished loading, and since that can take a while it means that more often that not anyone clicking on an image to enlarge it will get sent to an ugly bare and separate page.

So the big question is is there a way for me to force a browser to process whatever it needs for the lightbox before it starts loading the iframe?

Oh, and here is my test page.

posted by Jezztek to computers & internet (4 comments total)

You can have the browser load (and therefore cache) the image in the background by doing something like having it loaded on an invisible div as an image src, or just as an image object in javascript.

That said, Lightbox annoys the hell out of me.
posted by delmoi at 1:30 PM on October 1, 2007

Instead of having those arrows showing up before the main content does, could you put some text there that says something like "Loading images, please wait..."? Then, when the images load, they will cover up the text.

I see what you mean about the blank page. I've got a good connection, so it doesn't take long before it loads, but there is a half-second there where there seems to be no indication of activity on the nearly-blank page.

IANAWebDesigner
posted by philomathoholic at 1:38 PM on October 1, 2007

FWIW, I'm on a satellite internet connection (better than dialup, but not much) and the site was almost unusable due to the load times of Spreadshirt. I gave up after 5 minutes.

I think Lightbox is the least of your issues. I'm not gonna claim that my internet connection is fast, but I usually don't come across many sites that are not even beginning to render after 2-3 minutes of loading. This is your biggest barrier and a greater need for you to address IMO. The lack of Lightbox action on the picture didn't really bother me much, especially if you would make it open in a new window so it doesn't leave the current frame, but the lack of the rest of your store rendering because of the lag made it impossible to use.
posted by genial at 4:49 PM on October 1, 2007

Ooof, I guess I need to test things out on other connections more.

I'm using roadrunner and it takes a good 5-10 seconds usually (but if there is some lag then it can go up a bit). For me 5-10 seconds on cable seems like a long time, I had no idea it was failing to load after 2-3 minutes.

I've slimmed down the number of products displayed at once in hopes of speeding things up a bit, hopefully that helps.

Delmoi I'm more then a little bit clueless about how these things are queued, I was assuming from it's behavior that the scripts that create the overlays were not loading until the end, and that was the problem. But if it's that case that the image needs preloaded to enable the script to work then that shouldn't be too hard to fix at all. I'll toy around with things, Thanks much.
posted by Jezztek at 7:14 PM on October 1, 2007