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>
#1 by shubhajeet sinha on December 21, 2009 - 3:00 am
Sorry ! But it is not working at all..
#2 by Ahmed Kamal on March 9, 2010 - 3:45 pm
woooooooooooooooow so much thx