Question

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

为此，我将以下脚本放在标记中：

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

我在脚本中看到的问题：

这是重复的。
它运行，因此尝试加载图像每次加载任何新页面时（即使图像已经存在）载）。

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

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？

Answer 1

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

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

至于担心冗余负载，请不要 - 浏览器会解决这个问题。这就是缓存的重点。

如果您在页面中的某个位置执行此项工作，以便document.images已设置，那么除非您的图像列表对于多页网站而言是全面的，否则完全没有意义。对于单个页面，浏览器将解析DOM并在那时看到所有<img>标记，因此它已经加载了图像。仅为您所在的页面预加载图像可能不值得。从大型多页网站上的“欢迎”介绍页面进行操作非常有用，以便后续页面快速呈现。

改进基本脚本以预加载图像

1 个答案: