Loading iframe with Black (dark) background solution to White Flash before load

Page: 1

Author Post
papillion
Guest
First of all, I have tried just about ever "light, slim, grey, shadow..." box there is and Floatbox is by far the easiest and most stable and rather nice looking to boot! Compliments!
I want to post a solution to a problem no one seems to have...
I am using a Black background in my site theme and when FloatBox would load an iFrame (html) page the page would flash to White... Arrg! I looked in the css and the js and found nothing to change this... then I was fumbling through the files in the Floatbox folder and then in the Graphics folder I found a NOT graphic file called "loading_iframe.html" hmmm....

Here it is:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div#gif {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
background: #fff url(loading_white.gif) no-repeat fixed center;
}
</style>
</head>
<body>
<div id="gif"></div>
</body>
</html>


Changed this line:
background: #fff url(loading_white.gif) no-repeat fixed center; to...
background: #000 url(loading_black.gif) no-repeat fixed center;
Beautiful!
No white flashing background!
I love Floatbox even more!
Member
Registered: Jan 2009
Posts: 24
kudos to you! I thought that was annoying too, but I didn't think it was a priority and hunt something down. So I stayed with it. Anyways, since I am using black theme, I like this change.

BUT... since you are re-applying the background loader, there is a little problem that it starts over again. So if my loader is looking at left, loading loading_iframe.html jerks it to look right, which is a break in animation.

So I just used black bg, and removed the image part.

Again. Thanks. ;)
Administrator
Registered: Aug 2008
Posts: 3382
Papillion:
Thanks for this. It sounds like it would be helpful if I used colour-themed loading_iframes rather than just the always white one that's currently in place. I'll make this addition in the next version.
Member
Registered: Jan 2009
Posts: 24
About the gif loading thing, I am not sure if this is a bug or not, but it's annoying. Since I am using a circular rotating gif with beginning and the end, it revolves (you can see the beginning and the end). Now as soon as the loading_iframe.html loads, it resets the position, and starts over the animation. That produces jerky animation. For example, if the loader gif is "looking" down, when loading_iframe.html loads, it resets the position to up. So there is a jerk in the animation. Is there a way to stop this jerk?

I hope I made myself clear this time (my English isn't that good fyi).

Thanks admin. :D
Administrator
Registered: Aug 2008
Posts: 3382
Ok, I think I'm starting to know what you mean. You have an animated gif that gets re-displayed somewhere along the way, and when it does the phase of the animation resets back to frame 1. But where is this second gif coming from? There's the one that floatbox displays while it is animating in. Do you have a second one in the iframe content page itself that is shown when the iframe page is first rendered?

Well, regardless of where this 2nd gif is coming from, I know of no way to control or coordinate a browser's display of animated gifs, so your plan to just remove the background gif from loading_iframe sounds like the way to go.
Member
Registered: Jan 2009
Posts: 24
I am not exactly sure where it's coming from. I think the first one is coming from the floatbox.css file (while it's animating), and then that is also declared in loading_iframe.html (so it flashes before the content). So there are two declarations to the same loading image.

It might be just that I have made some kind of error in customizing floatbox. Let me know if it's just me or floatbox.

Thanks.
Administrator
Registered: Aug 2008
Posts: 3382
Yeah, I think if you've got a slow-loading iframe you can get a redraw of what I call the loading gif. That rotating wheel thingy is first shown on the box background as the floatbox is expanding up to full size. Then, when an iframe is being shown, the iframe source is initially set to the loader_iframe.html file. This is so if the real iframe source is slow to load, the screen is showing something other than blankness while waiting. So you can get an animation reset of that loading gif when it hands off from the background to the iframe src. This is just the way it is. It strikes me as small potatoes and you'd have to be looking for it to be troubled by it. But if it does trouble you, the approach of removing the background image from loader_iframe.html is probably the way to go.

Page: 1