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

发布于 2024-10-15 17:09:17 字数 1544 浏览 9 评论 0原文

我遇到了一个教程，将图像加载到缓存中，然后完成后重定向到另一个页面。我想用一组图像来执行此操作，然后当它们全部加载时重定向到新页面。它在教程中也提到了这一点，但没有完成。我已经尝试重新组织这段代码来做到这一点，但由于我是一个完全的 javascript 菜鸟，我无法将两者结合起来并让它工作。

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

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

干杯

更新

谢谢卢克，我尝试了下面的代码，但不幸的是仍然没有快乐......有什么想法吗？？？

<!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>

块引用

原文

I came across a tutorial to load an image into the cache then on completion redirect to another page.
I would like to do this with an array of images then when they are all loaded redirect to a new page. It mentions this in the tutorial as well but not in completion. I have tried reorganizing this code to do it but as I am a complete javascript noob I cannot combine the two and get it to work.

Here is the website http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

If someone could post the code up I would be very thankful. Also I reckon a lot of people would find it useful to use it as a preloader for sites with large background images.

Cheers

UPDATE

Thanks Luke, I tried the code below, but still no joy unfortunately.....any ideas???

<!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>

Blockquote

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相思碎 2024-10-22 17:09:17

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

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

回复收藏 0 原文