Question

我遇到了一个教程，将图像加载到缓存中，然后在完成时重定向到另一个页面。我想用一系列图像做这个，然后当它们全部加载时重定向到一个新页面。它在教程中也提到了这一点，但没有完成。我已经尝试重组这个代码来做到这一点，但因为我是一个完整的javascript noob我无法将两者结合起来并让它发挥作用。

这是网站http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

如果有人可以发布代码，我会非常感激。另外我认为很多人会发现将它用作具有大背景图像的网站的预加载器很有用。

干杯

更新

谢谢Luke，我尝试了下面的代码，但遗憾的是还是没有任何想法......任何想法???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language = "JavaScript">

function preloader() 

{

var loadedCount = 0;
var myImagesToPreload = ["images/threewheelerback.jpg", "images/grunge.png", "images/smalllogo2.jpg"];

function loaded() {
 loadedCount++;
 if (loadedCount == myImagesToPreload) {
     location.href="history.html";
 }
}

function preloader() 
{
     for(i=0, imageObj; i<=myImagesToPreload.length; i++) 
     {
          imageObj = new Image()
          imageObj.src=myImagesToPreload[i];
          imageObj.onload = loaded;
     }
} 
}

</script>

<title>Untitled Document</title>
</head>
<body onLoad="javascript:preloader()">



<body>
Loading....
</body>
</html>

块引用

Answer 1

var loadedCount = 0;
var myImagesToPreload = ["image1.jpg", "image2.jpg", "image3.jpg"];

function loaded() {
 loadedCount++;
 if (loadedCount == myImagesToPreload) {
    // Here you can leave the page...
 }
}

function preloader() 
{
     for(i=0, imageObj; i<=myImagesToPreload.length; i++) 
     {
          imageObj = new Image()
          imageObj.src=myImagesToPreload[i];
          imageObj.onload = loaded;
     }
}

Answer 2

我发现了一个有效的方法。

如果有人想要做同样的话

http://www.knowledgesutra.com/forums/topic/21316-image-preloader-with-progress-bar-status/

javascript中的多个图像预加载器，代码需要重新排序...帮助

2 个答案: