一种网页游戏图片预加载方案
上个月我写了一篇关于网页游戏图片预加载技术的文章，叫《很山寨的网页游戏图片预加载技术》。这个方案用到项目上后，发现了一些问题，经过大家的努力，这些问题基本得到解决，最终形成了一个产品级的预加载方案。目前，使用该方案的游戏项目已经顺利过了单元测试与整体测试，即将内测。
主要思路就是利用浏览器的缓存功能，尽可能简单的实现加载过程。因此该方案生效的前提是浏览器一定要开启缓存功能（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下测试通过。
浙公网安备 33010602011771号