在显示页面之前“预加载”画布动画的方法？答案

【问题标题】：Way to "preload" Canvas animation before showing the page?在显示页面之前“预加载”画布动画的方法？
【发布时间】：2013-05-29 09:22:46
【问题描述】：

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

它们似乎播放得非常好，但有时，页面在图像完全加载之前加载和播放动画（例如，一个动画具有相当大的背景图像~1mb）

有没有一种方法可以“加快”速度、“预加载/预取”图像（以及其他资源，如果需要的话），或者只是等到应用程序将图像加载到它的内存中（如果它这样做的话）显示和启动动画？

要补充最后一个问题，有没有办法“暂停”动画并仅在图像完全加载后播放？

谢谢

【问题讨论】：

标签： android jquery canvas webview createjs

【解决方案1】：

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

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

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

$('img.imgClass').load(function(){
  // The image loaded,,, code 
});

【讨论】：

很抱歉这个愚蠢的问题，但这要包含在我的javascript代码中，对吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

    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
    };


}

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

【讨论】：

@Lanny 这样做的方式不再实际。所以你不能使用 createjs.PreloadJS();