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

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>

我在脚本中发现的问题:

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？

Answer 1

您可以像这样创建字符串数组:

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

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

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