加载图像后重定向答案

【问题标题】：Redirect after loading images加载图像后重定向
【发布时间】：2015-02-08 23:50:40
【问题描述】：

所以我最近一直在开发一个网站，问题是每个页面的背景都是图像，因此，在较慢的连接（这是某些目标受众的情况）上，图像会按原样逐步加载下载，为了解决这个问题，我正在尝试制作一个执行以下操作的预加载页面：

加载图像

加载完成后，将用户重定向到请求的页面

<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并且没有给图像下载时间。

有什么想法可以让它在图像下载完成时向我发出信号，或者只在图像下载完成后执行重定向？

【问题讨论】：

下载所有这些图像需要多长时间？如果花费的时间超过几秒钟，那么您将在 3 秒后开始失去访问者，此后每秒流失的份额迅速增加。此外，如果您不采取措施来适应爬虫，这将导致 SEO 出现问题。只是提醒一下，对于现代网页设计来说，这可能不是您应该寻找的路径，除非这是某种艺术作品，您不太关心留住观众。
嘿 Mori，他们最多需要 5 秒来下载，SEO 明智的，如果他们不通过 JS（noscript），他们会自动重定向到主页，我还向他们提供了我的站点地图，不知道有没有帮助？
那是一条危险的道路。大多数人都希望减少他们的页面加载时间……您正在积极地延迟页面加载时间，只是为了让一些背景图像可见。请记住，渐进式加载 JPG 的发明是为了减少用户获取所需内容（内容）所需的时间，同时 UI 以用户连接允许的速度加载……故意破坏这将使访问者付出代价。文章：userintelligence.com/ideas/blog/2012/08/… 和 slideshare.net/stelianfirez/…

标签： javascript redirect wait

【解决方案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';
});

【讨论】：

太棒了！非常感谢您，这是一种享受！感谢您的宝贵时间

【解决方案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"
)

【讨论】：