关于图片预加载的问题

ace69

为了解决图片被加载的时候的卡顿 特别是连续加载很多图片的时候 想使用预加载图片的方法 一般怎么做呢？提前在非现实区域把图片都显示一遍么？

garfeng

在进入地图时，把你将要用到的图片都以0的透明度显示出来。

如果图片不在pictures目录下

修改你的index.html，添加
[pre lang="html"]<div style="display: none;">
        <img src="1.jpg">
        <img src="2.jpg">
        <img src="3.jpg">
</div>

[/pre]
游戏运行过程中不卡，但进入页面时往往会卡半天。

另一种比较装B的办法

[pre lang="javascript"]var paths = ["1.jpg","2.jpg","3.jpg"]; //需要加载的所有图片
var objs = [];

function preLoad(callback = null) {
        var tmp = new Image();
        var src = paths.pop();
        if (src == undefined) {
                //所有图片加载完毕，开始执行callback
                if (callback == null) {
                        return;
                }
                callback();
                return;
        }
        tmp.src = src;
        objs.push(tmp);

        //加载完后加载下一张
        tmp.onload = function(){preLoad(callback);};
        tmp.onerror = function(){throw new Error("fail to load" + src)};
}

function finishLoad(){
        alert("加载完毕！");
        for (var i = objs.length - 1; i >= 0; i--) {
                document.getElementsByTagName('body')[0].appendChild(objs);
        }
}

preLoad(finishLoad); //填入你要在图片加载完后运行的函数，注意是非阻塞。
//这样可以偷偷的加载完。preLoad(xxx)后面的命令不会被卡住。
[/pre]

ace69

garfeng 发表于 2016-11-16 17:16
在进入地图时，把你将要用到的图片都以0的透明度显示出来。

非常感谢~！不过图片特别多的时候一张张添加很费事啊，比如可以加载整个pirtures文件夹里的图片么？