javascript - 加载图像后重定向

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';
});