0

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

$(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 的了解是有限的——仅够定制预建功能和拼贴代码片段。

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

提前致谢，

汤姆

4

1 回答 1

0

I have never used a jQuery preload script but i have done a lot of preloading with 'vanilla' javascript. Try the code i have added below, it may solve your problem.

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
});

EDIT

preLoad() : this function accepts image urls as arguments e.g preLoad('image_one.jpg', 'image_two.jpg','image_thre.jpg');

The preLoad function has two variables var imgs and var imageFolder, imgs stores all the image urls and imageFolder stores image Objects, that is, preload loaded images.

于 2010-09-16T08:28:59.337 回答