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"
        )
    //--><!]]>
    

问题是它直接重定向(我假设它只是开始下载图像,然后直接将计数器变量加一,很快达到 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);
}

您需要检查一些事情,以免用户卡住:

  • 您需要等待两者loaderror以便在图像无法加载时页面不会卡住。
  • 您应该设置最大超时。
  • 此外,在您的代码中,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 回答