Добрый день,
Вот такой код сильно тормозит в Firefox 5 на ноутбуке с Core Duo 2.3 Ghz и видеокартой мобильный GeForce 9600:
splash.htm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<style type="text/css">
body
{
background-image:url('images/cat.png');
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:100%;
/*background-position:0,0,0,0px;
background-position:center;*/
margin: 0px 0px 0px 0px;
padding: 0;
border: 0;
/*max-height: 1680px;
max-width: 1024px;*/
overflow: hidden;
}
p.footer
{
font-family: 'Myriad Pro';
font-size: 24pt;
color: #ffffff;
}
html
{
height: 100%;
}
</style>
<script language=javascript src="scripts/lib.js"></script>
</head>
<body>
<audio controls preload id="audioControl" autoplay>
<source src="darkness.mp3" type="audio/mpeg">
</audio>
<table cellpadding="0" cellspacing="0" style="height:100%; width: 100%; border-collapse: collapse;">
<tr>
<td style="text-align: center; vertical-align: bottom;
padding-bottom:0px">
<div style="overflow: hidden; margin: 0px 0px 0px 0px; border: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;">
<button type="button" style="margin: 0px 0px 120px 0px;
background-image:url('images/button.png'); height: auto; width: auto"
onclick="parent.change();">Push me</button>
<p class="footer" style="margin: 0px 0px 0px 0px; color: #ffffff;">
© "Cat"</p>
</div>
</td>
</tr>
</table>
</body>
</html>
index.htm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script language=javascript src="scripts/lib.js"></script>
<style type="text/css">
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }
#mainframe.normal
{
opacity: 1.0;
}
#mainframe.faded
{
opacity: 0.0;
}
#mainframe
{
/* Firefox */
-moz-transition-property: opacity;
-moz-transition-duration: 3s;
/* WebKit */
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
/* Standard */
transition-property: opacity;
transition-duration: 3s;
}
</style>
<script language="javascript">
function change() {
document.getElementById('mainframe').className = "faded";
setTimeout(function () {
document.getElementById('mainframe').src = 'page2.htm';
document.getElementById('mainframe').className = "normal";
}, (2 * 1000));
}
</script>
</head>
<body style="background-color:black;">
<iframe id="mainframe" class="normal" src="splash.htm" marginheight="0" marginwidth="0" scrolling="no">
</iframe>
</body>
</html>
page2.htm
<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page2
</body>
</html>
Скачать все файлы, в т.ч. картинку можно тут (пришлось побить, не заливалось одним куском):
1
2
3
4
(открывать index.htm)
Видимо, оттого, что битмапка большая, все и тормозит. Хотелось бы плавненького перехода.
Буду благодарна за все идеи по оптимизации, но качество картинки ухудшать нельзя.
Спасибо.
