0

我认为这是一个非常简单的问题，如果在其他地方得到回答，请原谅我。我看了看，但找不到我要找的东西。我对 JavaScript 的经验很少。

我在一个页面上包含了许多简单的 JavaScript 幻灯片，这些幻灯片通过鼠标单击前进。有关我正在使用的代码，请参见下面的代码，该代码是从介绍性 JS 站点之一中提取的。当用户访问页面时，这会预加载每个幻灯片中的每个图像。我希望脚本不预加载每个图像，而是仅在用户单击以推进幻灯片时才加载下一个图像。这是为了减少加载时间，因为大多数用户不会遇到大多数图像。有没有一种简单的方法可以将其转换为不预加载每个图像的东西？

<SCRIPT LANGUAGE="JavaScript">
var i=0
var imgs=["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
function slide(){ {i=i+1} {if (i==5) {i=0}} {document.img.src=imgs[i]} }
</SCRIPT>

以及调用幻灯片时的代码：

<A HREF="JavaScript:slide()"><IMG SRC="/a.jpeg" NAME="img"></a>

谢谢！- 帕特里克

4

3 回答 3

0

Using you images array, 

var imgs = ["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]

You can do this:

function preloadImages(){
    for(var i=0 ; i<imgs.lenght ; i++) {
        img = new Image();
        img.src = "img/" + imglist[i];
    }
}

This function will preload all those images, so when you do the slide() the images are in browser cache.

This method doesn't work in all browsers, so when I need to do this trick, I also use a div with the size of 1x1 pixel (positioned outside the view) with all the images, like this:

<div>
    <img src="/a.jpeg" />
    <img src="/b.jpeg" />
    ...
</div>

This will also load all the images as soon as possible...

于 2013-02-15T00:24:01.613 回答
0

图像一旦src设置了属性就会开始加载，除非（非官方）元素的 cssdisplay属性设置为none.

因此，只要您不设置img元素或 JSImage对象的来源，就像您发布的代码中的情况一样，图像将不会开始加载。

于 2013-02-15T00:01:08.840 回答
0

啊，谢谢大家的回复。他们把我引向了我的答案，这只是我犯了一个非常愚蠢的错误。我误解了我网站分析测试的结果，这似乎表明所有图像都被下载到缓存中。这只是对结果的愚蠢误读，导致我陷入了疯狂的追逐，这是由于我缺乏对 JavaScript 的理解。回到测试这里回复后才意识到。这一切都按照我的预期进行，只需稍作调整。谢谢！

于 2013-02-15T18:59:43.240 回答