Question

我认为这是一个非常简单的问题，请原谅我，如果它已在其他地方得到解答。我看了，但无法找到我要找的东西。我对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>

谢谢！ - 帕特里克

Answer 1

图像开始加载一旦设置了src属性，除非（非正式地）元素的css display属性设置为none。

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

Answer 2

使用图像数组，

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

你可以这样做：

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

此功能将预加载所有这些图片，因此当您执行slide()图像位于浏览器缓存中时。

此方法不适用于所有浏览器，因此当我需要执行此操作时，我还使用大小为1x1像素（位于视图外部）的div和所有图像，如下所示：

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

这也将尽快加载所有图像...

Answer 3

啊，谢谢大家的回复。他们引导我回答，这就是我犯了一个非常愚蠢的错误。我误解了网站分析测试的结果，这似乎表明所有图像都被下载到缓存中。这只是对结果的误读，这导致我进行了一次疯狂的追逐，这是由于我缺乏对JavaScript的理解。我回过头来测试后才意识到这一点。这一切都像我想要的那样表现出微小的调整。谢谢！

没有预加载的简单JavaScript幻灯片

3 个答案: