exml自动加载图片

常规H5和微信小游戏同样有效 

 

一、exml自动加载图片

有两张图片

图片未放入defatult.res.json的资源组里，未预先加载包含2张图片的资源组，仅仅在default.res.json里有图片的链接

 

在exml上使用这2张图片

 

 运行Egret，图片会自动加载

 

 这样比较像一个普通html页面，上面有标签<img>，打开网页后，图片逐个加载出来。

这样的话，在实现exml页面的资源管理时，可以不使用RES.loadGroup加载该页面的资源组，而是让exml自动去异步加载。

 

优点：无需预加载图片和管理资源组

缺点：在图片未加载下来之前，界面上会是空白的。

 

二、问题

1. RES.loadGroup加载资源可以使用RES.destory()释放，那么exml自动加载的如何释放?

尝试不停的加载和移除包含图片资源的homeScene

        let homeScene:HomeScene;
        this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
            if(homeScene == null){
                homeScene = new HomeScene();
                this.addChild(homeScene);
            }else{
                this.removeChild(homeScene);
                homeScene = null;
            }
        },this);

 

内存占用有自动释放。打开homescene时5.4MB，关闭时5.2MB

 

 2. 使用TextureMerger合并的图片会自动加载吗?

 将图片使用tm合并

在homeScene.exml中使用，在json和png未使用RES.load的情况下，exml仍然会自动加载。

因为加载是根据default.res.json中的配置name和url等。

 

 3. 如果放在exml上的图片会自动加载，那么不放在exml上的动态异步加载的图片，该如何加载？

 

//因为"2"图片是未加载成功缓存的资源，所以使用getRes获取为null
console.log(RES.getRes("2"));   //null
		 
//使用getResAsync异步加载"2"图片
let img:eui.Image = new eui.Image();
RES.getResAsync("2").then((res)=>{
　　img.source = res;
　　this.addChild(img);
});		    

 

getResAsync异步加载的图片，可以显示

 

 不过这个异步加载，如果在加载中途等待时进行了其他操作，可能会出现一些问题 = =!

 

三、总结

1. 通用资源，比如弹框背景等，可以预加载通用资源组common，防止界面打开时时空白的。而弹框里的图片，可以异步加载。

   这样无需管理多个资源组，也无需等待界面所有资源加载完成才打开界面。

2. 每个弹框资源单独配置一个资源组，在打开该弹框时，先加载资源组，显示loading动画，加载玩成后再打开弹框。

 

转载于:https://www.cnblogs.com/gamedaybyday/p/9605257.html