blank background for loading graphic

Page: 1

Author Post
frank1o05
Guest
What a wonderful image viewer--with one catch: the beta testers of my new photo site design where I am trying out floatbox get really irritated at having to stare repeatedly at the loading graphic spinning in front of an empty background (Fast server, DSL connection, aggressive preload).

Is there a way to hack floatbox so that it leaves the previous image visible until the next one is loaded for a swift and smooth transition? (A lytebox modification at http://www.faszination-china.com/about_imaging_lytebox.php does this, but it has other problems, e.g. it makes Safari's scrollbar disappear for good).
Member
Registered: Jan 2009
Posts: 24
First of all, why would you want to do that? I mean what if the image is too big? There is no loader.gif, so the user does not know that the content is being loaded. So the users clicks like twice, and then floatbox skips that image. That's not good.

And besides, doesn't floatbox autoloads the next image? admin, confirm me on this, will you?

Let's say that you did only have small images, so it was fast even for dialup users (hmm. maybe 20x20?) :). You need to modify ajax calls so that when floatbox's the readyState is not 4, it keeps the image.

But from your thing, something struck me. What about adding gif loaders on top of the image (either in the center or in one of the corner)? I mean that would look sexy and have smooth transition.

admin, sleep on it. That's right, stuff this in your pillow and sleep on it. ;)
Administrator
Registered: Aug 2008
Posts: 3382
Ok. I'll chime in here now. I was going to wait to see how some stuff worked out, but...

I agree with frank1o05. In the case where you are moving from one image to another, without animations like fade and resize (as in the case in the sample frank linked to), there's no good aesthetic reason for floatbox to flash to black before swapping images. (There's code reasons, but that's another matter.) I'm working on delaying the removal of the old image until the new one is ready for showing, thereby eliminating the black transition. This will involve a slow-load indicator showing up over the current image if the next one is late to arrive.

But note that this only applies to non-animated transitions. Animated resizing still has to remove the old image before proceeding. I have tried to use an animated transition where the old image would opacity fade out while the new one faded in while the resizing was happening, but this didn't work out. It was fine if the images were the same size. For different sized images it worked and looked great in IE, was a little bit jerky in FF and Safari, slowed Chrome down to an ugly crawl, and caused Opera to fail to correctly size subsequent images.
frank1o05
Guest
Yes, ainstushar, some loading feedback is important for the users lest they think something is hung up. A little loader on the image, as you suggest, would be okay (the slideshow that I employ on my current website does that: http://doeringphoto.com). (But note that many loaders look bad on images because of aliasing issues. The ones that tend to look okay are not transparent and are rectangular.) It's of course easy for me as a Javascript illiterate to ask our already overgenerous host to deliver all the goodies I can dream up. I am already deeply in awe of all of you who continue the brave fight against browser idiosyncrasies.
Member
Registered: Jan 2009
Posts: 24
Yay, someone likes my idea. Your current slideshow is based in flash, so there is nothing to worry about anti-aliasing. I mean seriously, when does the crappy gif animation generation stop and actually use flash? I agree, the ones which actually work are rectangle and not very pretty. But I do like this one (if it doesn't work then go to ajaxload.info and select "bar" with transparent bg). I use it on my site sometimes. So if admin wants to add this feature in floatbox, I would love it.

Thanks.

Page: 1