1

だから私は最近サイトを開発しています。問題は各ページの背景が画像であり、その結果、接続が遅い場合（一部のターゲットオーディエンスの場合）、画像はダウンロードされるにつれて徐々に読み込まれます。これを解決する私は次のことを行うプリロードページを作成しようとしています：

  • 画像をロードします

  • ロードが完了すると、ユーザーを要求されたページにリダイレクトします

    <script type="text/javascript">
<!--//--><![CDATA[//><!--
    var images = new Array()
    var count=0;
    function preload() {
        for (i = 0; i < preload.arguments.length; i++) {
            images[i] = new Image()
            images[i].src = preload.arguments[i]
        }
    if(count==4) {
    window.location = "index.html";
    }
    }
    preload(
        "backgrounds/bg1.jpg",
        "backgrounds/bg2.jpg",
        "backgrounds/bg3.jpg",
        "backgrounds/bg4.jpg"
    )
//--><!]]>

問題は、直接リダイレクトすることです（イメージのダウンロードを開始してから、カウンター変数に直接1を追加し、すぐに4に到達し、イメージにダウンロードする時間を与えないと思います。

画像のダウンロードが終了したときに通知する方法、または画像のダウンロードが完了した後にのみリダイレクトを実行する方法はありますか？

4

2 に答える 2

2

loadイベントを待つ必要があります。それは非常に簡単です：

function preload(images, timeout, cb) {
  var cbFired = false,
      remaining = images.length,
      timer = null;

  function imageDone() {
    remaining--;

    if(remaining === 0 && !cbFired) {
      cbFired = true;
      clearTimeout(timer);
      cb();
    }
  }

  function timerExpired() {
    if(cbFired)
      return;

    cbFired = true;
    cb();
  }

  for(var i = 0; i < images.length; i++) {
    var img = new Image();
    img.onload = imageDone;
    img.onerror = imageDone;
    img.src = images[i];
  }

  timer = setTimeout(timerExpired, timeout);
}

ユーザーが行き詰まらないように、いくつかのことを確認する必要があります。

  • 画像の読み込みに失敗した場合にページがスタックしないように、両方loadを待つ必要があります。error
  • 最大タイムアウトを設定する必要があります。
  • また、あなたのコードでiは、グローバル変数（var宣言なし）でした。

使用方法は次のとおりです。

var images = [ "backgrounds/bg1.jpg",
    "backgrounds/bg2.jpg",
    "backgrounds/bg3.jpg",
    "backgrounds/bg4.jpg"];

preload(images, 10000 /* 10s */, function () {
  window.location = 'next_page';
});
于 2013-01-30T18:20:49.647 に答える
1

プリローダーを変更して、Imageオブジェクトの「onload」イベントにバインドし、すべてのコールバックが発生するとリダイレクトします（以下のテストされていないサンプルコード）。

var images = new Array()
var count = 0;
function preload() {
    var numImages = preload.arguments.length
    for (i = 0; i < numImages; i++) {
        images[i] = new Image();
        images[i].onload = doneLoading; // See function below.
        images[i].src = preload.arguments[i];
    }
    function doneLoading() {
        if (++count >= numImages) {
            window.location = "index.html";
        }
    }
}
preload(
    "backgrounds/bg1.jpg",
    "backgrounds/bg2.jpg",
    "backgrounds/bg3.jpg",
    "backgrounds/bg4.jpg"
)
于 2013-01-30T18:18:10.773 に答える