2017-01-12 2 views
0

答えがPreloadJsにあると思われますが、簡略化するためにcodeで修正しています。ここで最も重要な部分である:間違っCreateJS - イメージビットマップが途中で表示されない

original

何を:

let stage = new createjs.Stage('easel'), 
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackoverflow.jpg'); 
stage.addChild(bitmap); 
stage.update(); 

だから今の問題、これはあなたの最初の時間の後に私のコードを実行していないとき、あなたが得るものです。

しかし、あなたが訪問する最初の時間は、画像はまだそれをキャッシュされていない、とまで表示されません。ページをハードリセットすると同じことが起こります(ウィンドウ上のctrl + r)。これは明らかに大きな問題です。なぜなら、初めてページにアクセスしたときにはイメージがないからです。

  • PreloadJs,これが最も可能性の高いソリューションとなりますが、私のコードでこれまでのところ、それは働いていない:ここで私が試したものです。

    • これが私の現在のPreloadJSコードです:私のコードonloadをトリガ

      queue.on('complete', draw, this) 
      queue.load(imageUrl) 
      
      function draw() { 
          let bitmap = new createjs.Bitmap(imageUrl); 
          stage.addChild(bitmap); 
          stage.update(); 
      } 
      
  • 。問題は引き続き発生します。

  • setTimeoutのような遅延。非常にハックアップしているだけでなく、巨大な遅延があっても時間の一定割合を修正します。
  • このようなものanswerこれはハードリセットでは機能しますが、キャッシュをクリアすると、読み込みに時間がかかりすぎて、基本的に最初の読み込みを修正する考え方全体が損なわれてしまいます。

基本的にはこれらの解決策のうちのいくつかは時間を費やしていますが、一部のものはハッキングしているだけで、時間はそれほどではありません。最高の解決策は何ですか?

ことの一つは、私が何かをするとき、そのようなページのサイズを変更すると、画像が現れるだろうということです。私はサンプルコードでこれを再現することができませんでした。私は私が最初にstage.updateを実行したときに表示準備ができていなかったので、それはしなかったので、これが起こったと考えています。再びstage.updateをもう一度やり直すだけでは十分ではありません。

注:私は答えがないとして、これはこのquestionの複製であることを信じていません、それは歳で、彼らはいくつかの詳細を与えることができなかった、とコメントで提供する唯一のソリューション失敗しました。

+0

リンクはあなたの最初の時間を動作しない場合は教えてください私は人工的に最初の訪問のための条件を作成することができただけです。 –

答えて

1

stage.updateに電話すると画像が読み込まれません。あなたはビットマップに文字列のパスを渡す場合は、それをプリロードしても、それはまだ初期化するために時間がかかりますが、でもそのわずかミリ秒ならば、あなたはそれの準備ができる前に描画するためのステージを求めています。

ソリューションは、画像が完了すると描き、そしてあなたが代わりに文字列パスの、イメージを使用するようにすることです。

ここ
queue.on('complete', draw, this) 
queue.load(imageUrl) 

function draw() { 
    let bitmap = new createjs.Bitmap(queue.getResult("imgId")); // Reference 
    stage.addChild(bitmap); 
    stage.update(); 
} 

は、より完全な答えである:

let stage = new createjs.Stage('easel'), 
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackoverflow.jpg'); 
stage.addChild(bitmap); 
bitmap.image.onload = function() { 
    stage.update(); 
} 

があなたのプリロード・コードを修正するには:

あなたのコードを修正するにはeaseljs not showing bitmap

+0

ああ、それは私が 'getResult'おかげで忘れていたものです。私はこれも重複してマークしました。 –

関連する問題