How to display loading message when an iFrame is loading?
I have done the following css approach:
<div class="holds-the-iframe"><iframe here></iframe></div>.holds-the-iframe { background:url(../images/loader.gif) center center no-repeat;}
I think that this code is going to help:
JS:
$('#foo').ready(function () { $('#loadingMessage').css('display', 'none');});$('#foo').load(function () { $('#loadingMessage').css('display', 'none');});
HTML:
<iframe src="http://google.com/" id="foo"></iframe><div id="loadingMessage">Loading...</div>
CSS:
#loadingMessage { width: 100%; height: 100%; z-index: 1000; background: #ccc; top: 0px; left: 0px; position: absolute;}
If it's only a placeholder you are trying to achieve: a crazy approach is to inject text as an svg-background. It allows for some flexbility, and from what I've read the browser support should be fairly decent (haven't tested it though):
- Chrome >= 27
- FireFox >= 30
- Internet Explorer >= 9
- Safari >= 5.1
html:
<iframe class="iframe-placeholder" src=""></iframe>
css:
.iframe-placeholder{ background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat;}
What can you change?
Inside the background-value:
font size: look for font-size="" and change the value to anything you want
font color: look for fill="". Don't forget to replace the # with %23 if you're using hexadecimal color notation. %23 stands for a # in URL encoding which is necessary for the svg-string to be able to be parsed in FireFox.
font family: look for font-family="" remember to escape the single quotes if you have a font that consists of multiple words (like with \'Lucida Grande\')
text: look for the element value of the text-element where you see the PLACEHOLDER string. You can replace the PLACEHOLDER string with anything that is url-compliant (special characters need to be converted to percent notation)
Pros:
- No extra HTML-elements
- No js
- Text can easily (...) be adjusted without the need of an external program
- It's SVG, so you can easily put any SVG you want in there.
Cons:
- Browser support
- It's complex
- It's hacky
- If the iframe-src doesn't have a background set, the placeholder will shine through (which is not inherent to this method, but just standard behaviour when you use a bg on the iframe)
I would only recommend this only if it's absolutely necessary to show text as a placeholder in an iframe which requires a little bit of flexbility (multiple languages, ...). Just take a moment and reflect on it: is all this really necessary? If I had a choice, I'd go for @Christina's method