很山寨的网页游戏图片预加载技术
以下一种简单易懂，方便易用的网页图片预加载技术。:=D。
这种预加载技术使用了javascript技术、静态页面技术、div隐藏技术、gif动态图片技术、bash脚本技术、linux技术等各种前沿NB技术。。。
下面我就来揭开它神秘的面纱吧，当当当！！！！音乐~~~~掌声~~~~~~
---------------邪恶到不得了的分割线---------------------------------
主要思路就是利用浏览器的缓存功能，尽可能简单的实现加载过程。因此该方案生效的前提是浏览器一定要开启缓存功能（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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>很努力的加载中。。。</title>
<style type="text/css">
#loading-black{ background-color:#000000; z-index:3000; width:100%; height:100%;}
#loading{width:100%; height:100%; padding-top:212px; text-align:center; margin:0 auto; z-index:3000;}
</style>
</head>
<body bgcolor="#000" onload="window.location.href='index.php?ac=5game';">-->
<div id="loading-black" style="display:block">
<div id="loading"><img src="2008825893756277805.gif" /></div>
</div>
<div style="overflow-x:hidden; overflow-y:hidden; width:0px; height:0px;">
主意！！！！此处粘贴1.txt中的代码
</div>
</body>
</html>
3.最后一步，修改游戏为先跳转到loading页面，而后由loading页面的onload函数转入游戏主页面。
------------------------------------忧郁的分割线---------------------------------------
扩展：这种loading网页还可以被用作后台加载，就是游戏在前台跑的同时，后台自动加载剩下的图片、视频、声音等资源，具体实现方法是将需要加载的资源做成一个网页，像一些必须要调用才能加载的，比如视频、声音等，由js控制按照顺序加载。然后整个网页被游戏主网页用一个size为0的frame引用进来，即可实现后台加载效果。