javascript - 关于预加载 img 脚本的说明

Question

我想尝试在上一个 stackoverflow 问题上找到的这个预加载 img 脚本 - Preloading images with jQuery

为了澄清起见，我的图像路径是 img/bg/image1.jpg 我是否需要更改此脚本中的任何内容才能使其正常工作？另外，我是否需要任何其他文件，例如特定的 jquery 版本？我如何测试它是否正常工作？

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}   
preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Answer 1

您只需要加载jQuery并且当然将正确的图像路径放入数组中

preload([
    'img/bg/image1.jpg'
]);

该脚本所做的是在内存中创建一个<img>标签并使用给定的源加载图像。就是这样。除非您将 DOM 添加到 DOM，否则它不会出现在屏幕上<img>。

如果您有 Firebug 之类的调试工具，您可以查看“NET”选项卡并验证图像是否已加载到内存中。