1

我想预加载在我网站的各个页面上使用的十几个图像——这样当用户打开一个页面时，其中包含的图像会立即打开。

为了实现这一点，我在标签内放置了以下脚本：

<script>

if (document.images) {
var my_image_one = new Image();
my_image_one.src= "path/to/images/my-image-one.jpg";
var my_image_two = new Image();
my_image_two.src= "path/to/images/my-image-two.jpg";
var my_image_three = new Image();
my_image_three.src= "path/to/images/my-image-three.jpg";

/* etc. */

</script>

我在脚本中看到的问题：

  1. 它是重复的。
  2. 它运行，因此每次加载任何新页面时都会尝试加载图像（即使图像已经加载）。

我想改进它，创建这样的东西：

if (document.images) {
my_images = array (image_name=>path/to/image/image-name.jpg, et cetera);
for (i=1;i++;i<=array.length) {
if "the image hasn't been preloaded yet" {
preload image;
} 
}

如何将其翻译成正确的 JavaScript？

4

1 回答 1

1

你可以像这样创建一个字符串数组：

var paths = [ "first/path", "second/path", "third/path" ];

至于担心冗余负载，不要 - 浏览器会解决这个问题。这就是缓存的全部意义所在。

如果您在页面中document.images已设置的某个位置执行此工作，那么除非您的图像列表对于多页站点来说是全面的，否则根本没有必要这样做。对于单个页面，到<img>那时浏览器将解析 DOM 并查看您的所有标签，因此它已经在加载图像。一般而言，仅为您所在的页面预加载图像可能不值得。从大型多页站点上的“欢迎”介绍性页面开始执行此操作很有用，以便后续页面快速呈现。

于 2013-05-29T15:17:26.957 回答