一种网页游戏图片预加载方案
上个月我写了一篇关于网页游戏图片预加载技术的文章，叫《很山寨的网页游戏图片预加载技术》。这个方案用到项目上后，发现了一些问题，经过大家的努力，这些问题基本得到解决，最终形成了一个产品级的预加载方案。目前，使用该方案的游戏项目已经顺利过了单元测试与整体测试，即将内测。
主要思路就是利用浏览器的缓存功能，尽可能简单的实现加载过程。因此该方案生效的前提是浏览器一定要开启缓存功能（IE、Firefox等默认都是开启的）
1.首先，你需要把所有需要预加载的图片放到电脑上的一个文件夹下面。我的系统是ArchLinux的，所以我写了一个bash脚本来扫描图片文件夹下面所有的图片，并生成一段HTML代码，脚本代码如下
#!/bin/bash
for name in $(find .|grep '\.jpg$')
do
echo "<img src=\"$name\">"
done
for name in $(find .|grep '\.png$')
do
echo "<img src=\"$name\">"
done
保存为bat.sh，然后设置其为可执行权限并放到图片目录下
接着，打开一个新的tyy窗口，运行.\bat.sh >> 1.txt。就可以得到一份所有图片文件的HTML代码了，代码存储在1.txt里面。
2.在游戏主页面前加入一个loading页面，代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow-x:hidden; overflow-y:hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XX网页游戏</title>
<style type="text/css">
#loading-black{ background-color:#000000; z-index:3000; width:100%; height:10000;}
#loading{width:100%; height:100%; padding-top:212px; text-align:center; margin:0 auto; z-index:3000;}
</style>
<script language="javascript">
var iframe = document.createElement("iframe");
function HideLoading()
{
document.getElementById("loading-black").style.display = "none";
//iframe.style.display = "none";
//iframe.style.display = "block";
}
function GameLoop()
{
iframe.src = "index.php?ac=5game";
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
;//alert("Local iframe is now loaded.");
});
} else {
iframe.onload = function(){
;//alert("Local iframe is now loaded.");
};
}
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '632');
iframe.setAttribute('frameborder', '0', 0);
iframe.setAttribute('marginheight', '0');
iframe.setAttribute('marginwidth', '0');
iframe.setAttribute('style', 'overflow-x:hidden; overflow-y:hidden; position:absolute; margin-left:0px; margin-top:0px;');
document.body.appendChild(iframe);
setTimeout ("HideLoading()",5000 )
}
function closeWindow() {
//关闭游戏标示
jQuery.ajax({
type: "POST",
url: "index.php?ac=login&sac=log_out",
async: false, //ajax同步
data: "action=del_check",
success: function(msg){
//alert('ddddddddddd'+msg);
if(msg == 'succ'){
location.href = 'index.php';
}
return;
}
});
}
//禁止用F5键、否则关闭页面
function document.onkeydown()
{
if(event.keyCode==116)
{
event.keyCode = 0;
event.cancelBubble = true;
//closeWindow();
return false;
}
}
//浏览器关闭事件
function window.onunload(){
closeWindow();
}
//浏览器关闭事件
function window.onbeforeunload(){
closeWindow();
}
</script>
</head>
<!--<body bgcolor="#000" onload="window.location.href='index.php?ac=5game';">-->
<body bgcolor="#000" onload="GameLoop()" style="margin:0 0 0 0px; margin-left:auto; margin-right:auto; text-align:center; overflow-x: hidden; overflow-y: hidden;" >
<div id="loading-black" style="display:block">
<div id="loading">
<img src="2008825893756277805.gif" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div style="overflow-x:hidden; overflow-y:hidden; width:0px; height:0px;">
这里粘贴1.txt的内容
</div>
</body>
</html>
这里要说明的几点，整个页面的原理是在下面div图片加载完成后，通过js动态加上一个iframe，这个iframe就是游戏主页面，这样做主要是为了避免跳转网页后，图片闪烁加载的问题，但是这个iframe加载的时候，仍然存在闪烁的问题，所以先将其置于用户可视范围之外，待加载完成后，再调整iframe的位置。这里隐藏了页面上的横竖滚动条，这样，用户就看不到iframe的加载了，取而代之的是一个loading的div层。
这个方案在上次方案的基础上，除了力求简单外，还解决了加载图片闪烁、禁止刷新的问题，在IE7、IE8及Firefox下测试通过。