Rather than a white rectangle on your page while an <iframe> is loading, you can set a background image in CSS. This works in IE7 & IE8 (with a bit of a flash when the iframe content is ready); Firefox 3.6 and Chrome 10 (perfectly); but in Safari 5 the background image is not shown until the iframe is loaded.
I found this useful when 'co-branding' a site to use another site's header and footer in an iframe. Since I could not trust the speed of the other sites, I grabbed their logo, then positioned it as a background image on the iframe so the logo was in the same position as the final iframe version. Then at least the user sees a nice logo straight away, and they might need a second or two before the navigation and other elements of the other sites headers show up.
This was the iframe code:
<iframe width="960" height="154" scrolling="no" frameborder="0"
marginwidth="0" marginheight="0" src="[other-site-URL]"
style="background:url('[local-logo-URL]') no-repeat scroll [X-off]px [Y-off]px;"></iframe>
No comments:
Post a Comment