加載圖像后重定向

Question

因此，我最近一直在開發一個站點，問題是每個頁面的背景都是圖像，結果，在連接速度較慢的情況下（某些目標受眾是這種情況），圖像在下載時會逐步加載到解決此問題，我試圖制作一個執行以下操作的預加載頁面：

• 加載圖像

• 加載完成后，將用戶重定向到請求的頁面

   <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，而沒有給映像下載時間。

有什么想法可以使我在下載完成圖像后發出信號，還是僅在完成下載圖像后才執行重定向？

Answer 1

您需要等待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';
});

Answer 2

修改您的預加載器，使其綁定到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"
)