1

かなり基本的な Canvas アニメーションを再生するローカルに保存された HTML ファイルを表示するために、WebView の実験を開始しました (CreateJS ライブラリを使用)。

それらは非常にうまく再生されているように見えますが、画像が完全に読み込まれる前に、ページが読み込まれてアニメーションが再生されることがあります (たとえば、1 つのアニメーションの背景画像が 1 MB までかなり大きい)。

物事を「高速化」する方法、画像（および必要に応じて他のアセット）を「プリロード/プリフェッチ」する方法、またはアプリが画像をメモリにロードするまで待つ方法（そうする場合）を表示して開始する前にアニメーション？

最後の質問に加えて、アニメーションを「一時停止」して、画像が完全にロードされてから再生する方法はありますか?

ありがとう

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

次のように実行できます: これを実行する関数を作成します:

    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 に答える
0

すべての画像または外部リソースがロードされた後に実行される onload イベントを試してください。

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

または、個々の画像の load イベントを試して、読み込まれたときにコードを実行できます。

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