5

私はこのようなことをする必要があります：

  • コードを実行する
  • 画像の読み込みを開始し、スクリプトの実行をブロックします
  • 画像が読み込まれたら、実行を再開します
  • 残りのコードを実行します

最も簡単な方法は、画像のonloadイベントに関数を割り当ててから、関数内の残りのコードを実行することですが、可能であれば、スクリプトの実行をブロックする「線形」動作を実行してから再開する必要があります。それ。それで、これを行うためのクロスブラウザの方法はありますか？

4

5 に答える 5

3

スクリプトの実行をブロックする唯一の方法は、ループを使用することです。ループを使用すると、ほとんどのブラウザーがロックされ、Web ページとのやり取りができなくなります。

Firefox、Chrome、Safari、Opera、IEのすべてがこのプロパティをサポートし、complete最終的に HTML5 で標準化されました。whileこれは、ループを使用して、イメージのダウンロードが完了するまでスクリプトの実行を停止できることを意味します。

var img = new Image();
img.src = "/myImage.jpg";
document.body.appendChild(img);
while (!img.complete) 
{
    // do nothing...
}

// script continues after image load

そうは言っても、ブラウザーをロックせずに目標を達成する方法を検討する必要があると思います。

于 2010-02-17T14:35:26.643 に答える
1

スクリプトの実行を完全にブロックしようとはしません。ブラウザの速度が低下したり、スクリプトの実行に時間がかかりすぎていることをユーザーに警告したりする可能性があるためです。

できることは、イベントを使用して作業を終了することにより、コードを「線形化」することです。画像が読み込まれない可能性があるため、関数にタイムアウトを追加する必要があります。

例：

var _img = null; 
var _imgDelay = 0;
var _finished = false;

function startWork(){
   _img = document.createElement('img');
   _img.onload = onImgLoaded;
   _img.src = 'yourimg.png';

   // append img tag to parent element here

   // this is a time out function in case the img never loads,
   // or the onload event never fires (which can happen in some browsers) 
   imgTimeout();   
}

function imgTimeout(){
   if (_img.complete){
      // img is really done loading
      finishWork();
   }
   else{
      // calls recursively waiting for the img to load
      // increasing the wait time with each call, up to 12s
      _imgDelay += 3000;

      if (_imgDelay <= 12000){ // waits up to 30 seconds
         setTimeout(imgTimeout, _imgDelay);
      }
      else{
         // img never loaded, recover here.
      }
   }
}

function onImgLoaded(){
   finishWork();
}

function finishWork(){
   if (!_finished){
      // continue here
      _finished = true;
   }
}
于 2010-02-17T14:57:57.003 に答える
1

この提案は、まさにあなたが求めていたものではありませんが、可能な代替案として提案します。

使用する background-image で CSS クラスを作成します。アプリの起動時に、この CSS クラスを、サイトの外に隠れているか、サイズが 0 × 0 ピクセルの DIV に割り当てます。これにより、イメージがサーバーから確実にロードされます。画像をロードする場合 (上記のステップ 2)、作成した CSS クラスを使用します。これはすぐに起こります。後続のコードの実行をブロックする必要がないほど十分に速いのでしょうか?

于 2010-02-17T14:41:01.343 に答える
1

前処理の手順を実行しても構わない場合は、Narrative Javascriptを試してください。

image.onload = new EventNotifier();
image.onload.wait->();
于 2010-02-17T14:33:42.933 に答える