使用数组预加载图像

Question

我正在使用以下代码在图片库中预加载图片：

$(window).bind('load', function(){

var imageNumber = $(".image").attr("alt");
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2    
var imageDown = parseInt(imageNumber) - 1
var preload = [
    'image' + imageUp + '.jpg',
    'image' + imageUp2 + '.jpg',
    'image' + imageDown + '.jpg',
    ];

    $(document.createElement('img')).bind('load', function(){
    if(preload[0]) this.src = preload.shift();
     }).trigger('load');          

});

我修改了另一个基本的 javascript/jQuery 预加载脚本，添加变量以便从当前图像的 alt 标记中获取数值，并预加载紧接在它之前和之后的图像 (n+1 n+2 n-1)在画廊。这行得通，尽管我想它可能有点难看。

我要做的是添加或调用另一个包含目录中所有图像的数组，以便在上一个和下一个图像加载后，当前页面继续预加载其他图像，将它们保存在浏览器中以供将来查看当用户在画廊中移动时。

理想情况下，第二个数组将从外部 .js 文件中调用，以防止必须单独更新每个页面。 （或者也许将整个脚本保存在每个目录的外部 .js 文件中并根据该目录的内容填写数组的其余部分会更容易？）。

网页设计对我来说只是一种爱好（我是一名摄影师），所以我对 javascript 的了解有限——仅够自定义预构建的函数和拼贴代码片段。

如果有人能指出如何修改我的代码的正确方向，我将不胜感激。

提前致谢，

汤姆

Answer 1

我从未使用过 jQuery 预加载脚本，但我已经使用“vanilla”javascript 进行了很多预加载。 试试我在下面添加的代码，它可能会解决你的问题。

function preLoad() { // my preload function;
    var imgs = arguments, imageFolder = [];

    for (var i = 0; i < imgs.length; i += 1) {
        imageFolder[i] = new Image();
        imageFolder[i].src = imgs[i];
    }
}

var gallary = []; // all gallary images

$(window).bind('load', function(){

var imageNumber = $(".image").attr("alt");
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2    
var imageDown = parseInt(imageNumber) - 1
var preload = [
    'image' + imageUp + '.jpg',
    'image' + imageUp2 + '.jpg',
    'image' + imageDown + '.jpg',
    ];

    $(document.createElement('img')).bind('load', function(){
    if(preload[0]) this.src = preload.shift();
     }).trigger('load'); 

  preLoad(gallary); // preload the whole gallary
});

编辑

preLoad() : 此函数接受图像 URL 作为参数，例如 preLoad('image_one.jpg', 'image_two.jpg','image_thre.jpg');

preLoad函数有两个变量var imgs和var imageFolder，imgs存储所有图片url，imageFolder存储图片对象，即预加载加载的图片。