Redirect after loading images

问题

So I have been recently developing a site, The problem is the backgrounds for each page are images, and as a result, on slower connections (which is the case of some of the target audience) the images load progressivly as they are downloaded, to resolve this I am trying to make a preloading page that does the following :

Loads the Images

Once the loading is done, redirects the user to the requested page

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

The problem is it redirects directly (I assume that it just starts the download of the image then directly adds one to the counter variable, quickly reaching 4 and not giving the image the time to download.

Any ideas how I can either make it signal me when the images have finished downloading, or only execute the redirect after it has done downloading the images ?

回答1:

You need to wait for the load event. It's quite simple:

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

You need to check a few things so that users don't get stuck:

You need to wait for both load and error so that the page doesn't get stuck if an image fails to load.
You should set a maximum timeout.
Also, in your code, i was a global variable (no var declaration).

Here's how to use it:

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

preload(images, 10000 /* 10s */, function () {
  window.location = 'next_page';
});

回答2:

Modify your preloader so that it binds to the "onload" event of the Image object and when all callbacks are fired it redirects (untested sample code below):

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"
)

来源：https://stackoverflow.com/questions/14610771/redirect-after-loading-images

标签

javascript

redirect

wait