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-tag获取数值并预先加载它之前和之后的图像（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（）：此函数接受图片网址作为参数，例如preLoad('image_one.jpg', 'image_two.jpg','image_thre.jpg');

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

图像预加载数组

1 个答案: