Javascript 加载图像后重定向

因此，我最近开发了一个网站，问题是每个页面的背景都是图像，因此，在连接速度较慢的情况下，一些目标受众在下载图像时会不断加载图像，为了解决这个问题，我正在尝试制作一个预加载页面，该页面执行以下操作：

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

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

---

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

修改预加载程序，使其绑定到图像对象的onload事件，并在所有回调被触发时重定向未经测试的示例代码，如下所示：

var images=新数组 var计数=0； 功能预加载{ var numImages=preload.arguments.length 对于i=0；i=numImages{ window.location=index.html； } } } 预载 背景/bg1.jpg， 背景/bg2.jpg， 背景/bg3.jpg， 背景/bg4.jpg

---

修改预加载程序，使其绑定到Image对象的onload事件，并在触发所有回调时重定向以下未测试的示例代码：

var images=新数组 var计数=0； 功能预加载{ var numImages=preload.arguments.length 对于i=0；i=numImages{ window.location=index.html； } } } 预载 背景/bg1.jpg， 背景/bg2.jpg， 背景/bg3.jpg， 背景/bg4.jpg 您需要等待加载事件。很简单：

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

您需要等待加载事件。很简单：

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

---

下载所有这些图片需要多长时间？如果超过几秒钟，你会在3秒钟后开始失去访客，之后每一秒钟就有越来越多的人离开。此外，如果你不做一些事情来适应爬虫，这将导致搜索引擎优化的问题。提醒一下，对于现代网页设计来说，这可能不是你应该寻找的路径，除非这是一种你不太关心如何留住观众的艺术作品。嘿，Mori，从搜索引擎优化的角度来看，下载它们最多需要5秒钟，如果不通过JS noscript，它们会自动重定向到主页，我也向他们提供了我的网站地图，不知道这是否有帮助？这是一条危险的道路。大多数人希望减少他们的页面加载时间。。。您主动延迟页面加载时间只是为了让一些背景图像可见。请记住，发明渐进加载JPG是为了减少用户以用户连接允许的速度加载内容时，用户获取所需内容所需的时间。。。故意击败这一点会让访问者付出代价。文章：下载所有这些图片需要多长时间？如果超过几秒钟，你会在3秒钟后开始失去访客，之后每一秒钟就有越来越多的人离开。此外，如果你不做一些事情来适应爬虫，这将导致搜索引擎优化的问题。提醒一下，对于现代网页设计来说，这可能不是你应该寻找的路径，除非这是一种你不太关心如何留住观众的艺术作品。嘿，Mori，从搜索引擎优化的角度来看，下载它们最多需要5秒钟，如果不通过JS noscript，它们会自动重定向到主页，我也向他们提供了我的网站地图，不知道这是否有帮助？这是一条危险的道路。大多数人希望减少他们的页面加载时间。。。您主动延迟页面加载时间只是为了让一些背景图像可见。请记住，发明渐进加载JPG是为了减少用户以用户连接允许的速度加载内容时，用户获取所需内容所需的时间。。。故意击败这一点会让访问者付出代价。文章：棒极了！非常感谢，这真是一种享受！谢谢你的时间！非常感谢，这真是一种享受！谢谢你的时间