Question

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

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

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

要添加到最后一个问题，有没有办法“暂停”动画，只有在图像完全加载后才能播放？

由于

Answer 1

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

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

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

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

Answer 2

CreateJS套件包含PreloadJS，这是一种非常好的预加载EaselJS使用的内容的方式，或任何其他内容。 http://preloadjs.com

您可以预先获取图片，javascript，音频，JSON / text / 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

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


}

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

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

3 个答案: