很山寨的网页游戏图片预加载技术

以下一种简单易懂，方便易用的网页图片预加载技术。:=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引用进来，即可实现后台加载效果。