所以我有一个首先加载的页面。这个页面有一些jQuery，它会在图像和文本中淡入淡出，经过一段时间后会逐渐消失。然后页面将切换到下一页。
问题是，当它改变页面时，背景变为白色，因为它正在加载新页面。我正在使用完全相同的背景图像顺便说一句。
所以我想要么解决以下问题之一，因为它们是我能想到的全部。
选项1）有一个脚本，可以在加载主体之前加载背景图像。唯一的问题是，我在body标签中设置背景。 <body onload="preLoader()" background="images/blue.png">
选项2）以某种方式将第一页合并到第二页，我认为这太难了。
仅供参考，以下是第一页的jQuery：
var delay = 6500;
$('#pre_title').hide(0).delay(500).fadeIn(2000);
$('#loader_logo').hide(0).delay(500).fadeIn(2000);
$('#pre_title').delay(500).fadeOut(2000);
$('#loader_logo').delay(500).fadeOut(2000);
setTimeout(function(){ window.location.href = "ls.php"; }, delay );
这是jQuery在第二页的HTML中淡出。
function preLoader() {
$("html").hide(0).delay(500).fadeIn(1000);
}
这是一个简单的Vanilla JS概念验证实现，使用iframe来帮助您入门。
<html>
<head>
<style>
body {background: rgba(255, 0, 0, .2);font-size:4em;}
</style>
<script>
</script>
</head>
<body>
this is page 0...this is page 0...this is page 0...<br />
this is page 0...this is page 0...this is page 0...<br />
this is page 0...this is page 0...this is page 0...<br />
this is page 0...this is page 0...this is page 0...<br />
this is page 0...this is page 0...this is page 0...<br />
</body>
</html>
<html>
<head>
<style>
body {background: rgba(0, 255, 0, .2);font-size:4em;}
</style>
<script>
</script>
</head>
<body>
this is page 1...this is page 1...this is page 1...<br />
this is page 1...this is page 1...this is page 1...<br />
this is page 1...this is page 1...this is page 1...<br />
this is page 1...this is page 1...this is page 1...<br />
this is page 1...this is page 1...this is page 1...<br />
</body>
</html>
<html>
<head>
<style>
body {background: rgba(0, 0, 255, .2);font-size:4em;}
</style>
<script>
</script>
</head>
<body>
this is page 2...this is page 2...this is page 2...<br />
this is page 2...this is page 2...this is page 2...<br />
this is page 2...this is page 2...this is page 2...<br />
this is page 2...this is page 2...this is page 2...<br />
this is page 2...this is page 2...this is page 2...<br />
</body>
</html>
<html>
<head>
<style>
body {
background-image:url('http://stmed.net/sites/default/files/stone-wallpapers-28059-3653690.jpg');
position:absolute;top:0,left:0;;height:100%;width:100%;
}
#pFrame0, #pFrame1 {position:absolute;top:20px,left:20px;opacity:1;height:100%;width:100%;}
#pFrame1 {opacity:0;}
form {position:absolute;top:5px;left:5px;z-index:3;}
</style>
<script>
var dir = 'file:///home/richard/Documents/code/';
var pageList = [
'page0.html', 'page1.html', 'page2.html'
];
function get(eId) {return document.getElementById(eId);};
var nextPageIdx=0;
function run() {
nextPageIdx++
nextPageIdx = (nextPageIdx == pageList.length)?0:nextPageIdx;
loadPage(pageList[nextPageIdx]);
};
function loadPage(uri) {
var current = (1 == 1*get('pFrame0').style.opacity)?'pFrame0':'pFrame1';
var next = (1 == 1*get('pFrame0').style.opacity)?'pFrame1':'pFrame0';
setTimeout("swapPages('" + uri + "','" + current + "','" + next + "'), crossFade('" + current + "', '" + next + "')");
};
function swapPages(uri, current, next) {
get(current).src = get(next).src;
get(current).style.opacity = 1;
setTimeout("get('" + next + "').style.opacity = 0;", 50);
setTimeout("get('" + next + "').src = '" + uri + "';", 100);
};
function crossFade(current, next, msecs) {
if ('undefined' == typeof msecs) msecs = 5000;
var delta = 100/msecs;
get(current).style.opacity = 1;
get(next).style.opacity = 0;
for (var i = 0; i < msecs/100; i++) {
setTimeout("get('" + current + "').style.opacity = (1*get('" + current + "').style.opacity) - " + delta, i*msecs/100);
setTimeout("get('" + next + "').style.opacity = (1*get('" + next + "').style.opacity) + " + delta, i*msecs/100);
}
return msecs;
};
</script>
</head>
<body>
<iframe id="pFrame0" src="file:///home/richard/Documents/code/page0.html"></iframe>
<iframe id="pFrame1" src="file:///home/richard/Documents/code/page1.html"></iframe>
<form>
<input type="button" value="load next page" onclick="run();" />
</form>
</body>
</html>