To preload iFrame in JavaScript is possible. Sometimes it takes a while for a iFrame page to be loaded, this causes ‘a moment of blankness’ which is not what we want the user to see. To fix this bad user experience, we could make a preloader to preload the iFrame, only when the iFrame is loaded, then we display the content.
To do so, we could use the existing JavaScript library – jQuery. The script below is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<iframe src ="http://www.yahoo.com" width="100%" height="300"></iframe>
<img src="http://www.ezeego1.co.in/hotels/india/athirapally/page/webroot/images/preloader.gif" id="preload-img" />
<script>
$('iframe').css('display', 'none');
$('iframe').load(function()
{
$('iframe').css('display', 'block');
$('#preload-img').css('display', 'none');
});
</script>
</body>
</html>
Sorry ! But it is not working at all..
woooooooooooooooow so much thx
Fantastic, thank!
wow, thanks but i have a prob. after using this cufon.js stoped working …
plz. suggest me any solutions.
hi!
where do have to add this code in order to work ?
thx & br,
bjoern
Hey ! Helpfull ! thx for this script ;)
Very helpful! thank you very much.