1

我正在用 javascript 制作图像数组来预加载图像。代码如下所示。

imageArr[0]=new Image();        
imageArr[0].src='mypath/myimgname.jpg'; 
imageArr[1]=new Image();        
imageArr[1].src='mypath/myimgname.jpg'; 
imageArr[2]=new Image();        
imageArr[2].src='mypath/myimgname.jpg';

然后我在需要时在可能的代码中使用这个元素。我在每一页的开头声明了这个数组。我们每页都需要这种 150 张大尺寸图像。

所以我的问题是，当我在每一页上写这段代码时。它会在每个页面上一次又一次地加载图像吗？或者它只会在浏览器中加载图像一次。之后，当我在第二页上再次写这个数组时。那么它只是在浏览器中使用它。还是一次又一次地从服务器获取图像？

如果这种方法是错误的，那么正确的方法应该是什么？

4

4 回答 4

2

图像（jpg）保留在浏览器的缓存中，但是当您更改页面时，imageArr 不在 Javascript 范围内（如果，正如我想象的那样，您在全局上下文中定义了该数组）所以您需要每次都重新初始化它。我认为您的方法没有任何问题，但我不知道您想要获得什么。

于 2012-09-28T16:41:56.880 回答
2

如果您使用的是 jquery，那么我建议您使用waitforimages 插件。

不过，你的做法没有错，比较简单，而且图片还是从缓存中取的

于 2012-09-28T16:44:06.870 回答
1

PHP 可以向浏览器发送标头来告诉它缓存内容。看这里：

如果您不发送标头，浏览器可能会也可能不会缓存图像，并且所有浏览器的工作方式不会完全相同。如果您确实发送了标头，则无法保证浏览器无论如何都会缓存。浏览器可能会因为各种原因忽略缓存请求，例如用户处于隐私浏览模式。

让我们假设您确实可以在所有浏览器中使用缓存。好吧，一个包含 150 个大图像的页面看起来和性能都很差，没有多少缓存会阻止第一次加载变慢。

您是否考虑过不同的方法？例如显示单个大图像和一组缩略图，如果选择缩略图则换出大图像。这意味着第一个页面视图没有巨大的负载，也不需要任何特殊的修复，比如冗长的缓存。

于 2012-09-28T16:56:51.167 回答
1

Dena...我一直使用这种方法来预先缓存我的图像，我一直发现它相当有效。创建 Image Obj 并为其分配 Imagesrc后，该图像将永久保存在您的缓存中，或者直到您决定将其清除。Array 充当所有图像的容器，并允许您在需要时将图像分配给元素。

一种选择是您可以在“索引/默认”脚本中创建一个数组并创建您需要的所有图像，但这会导致提到的问题 obe6。当您离开页面时，该数组将不再存在（尽管图像仍将被缓存）。如果您想在每个页面上都有一个可用的数组，那么您可以为每个页面创建一个新数组并加载特定于该页面的图像。这是我采用的方法，它看起来更有条理，而且还可以增加加载时间。

正如我上面提到的，每个页面都有一个单独的数组允许您将图像分配给数组中的一个元素。例如，我将使用您的代码：

脚本：

var imageArr = new Array();

imageArr[0]=new Image();        
imageArr[0].src='mypath/myimgname.jpg'; 
imageArr[1]=new Image();        
imageArr[1].src='mypath/myimgname.jpg'; 
imageArr[2]=new Image();        
imageArr[2].src='mypath/myimgname.jpg';

var testImage01 = document.getElementById("testImage01");
testImage01.src = imageArr[0].src;

HTML：

<table>
    <tr>
        <td>
            <img id="testImage01" src="" alt="Test Image" />
        </td>
    </tr>
</table>

请记住运行 JS onload，否则该img元素将不可用。您的示例代码中没有任何 jQuery，但$(document).ready()如果有，您可以使用。

希望这对您有所帮助，并让您对使用此方法有更好的了解。

于 2012-09-28T18:55:44.740 回答