1

我已经开始尝试使用 WebView 来显示本地存储的 HTML 文件,这些文件播放一些相当基本的 Canvas 动画(使用 CreateJS 库)。

它们似乎玩得很好,但有时,页面在图像完全加载之前加载和播放动画(例如,一个动画有一个相当大的背景图像~1mb)

有没有办法“加快”速度,“预加载/预取”图像(以及其他资产,如果需要),或者只是等到应用程序将图像加载到其内存中(如果这样做的话),然后再显示和启动动画?

为了补充最后一个问题,有没有办法“暂停”动画并且只有在图像完全加载后才播放它?

谢谢

4

3 回答 3

0

CreateJS 套件包括 PreloadJS,这是一种相当不错的预加载 EaselJS 使用的内容或任何其他内容的方式。 http://preloadjs.com

您可以预取图像、javascript、音频、JSON/文本/XML、SVG、CSS 等。

var queue = new createjs.PreloadJS();
queue.addEventListener("complete", handleComplete);
queue.loadManifest([
    {id: "image", src:"image.png"},
    {id: "image2", src: "image2.jpg"},
    {id:"script", src:"script.js"}
]);

function handleComplete(event) {
    var image = queue.getResult("image"); // Returns an image tag
}

有一些解决方法可以预加载音频(具有多种格式),或者使用标签加载来解决跨域问题。查看更多文档: http ://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html

于 2013-06-04T15:38:12.507 回答
0

尝试加载所有图像或外部资源后运行的 onload 事件:

$(window).load(function(){
  //code
});

或者您可以尝试使用单个图像的加载事件并在它们加载时运行您的代码:

$('img.imgClass').load(function(){
  // The image loaded,,, code 
});
于 2013-06-03T09:09:17.097 回答
0

你可以这样做:创建一个应该这样做的函数:

    loadData();

loadData = function()
{
preloader = new createjs.LoadQueue(true);
        preloader.addEventListener("complete",this.handleComplete.bind(this));

        var manifest = [

            {src:"./images/yourIMAGE.PNG"},

        ];


        preloader.loadManifest(manifest);
    };


    handleComplete = function()
    {
        console.log("Load complete!");
       //other function
    };


}

这是一种方法。如果您有任何问题,请告诉我。

于 2013-10-16T08:18:37.300 回答