试图找到一个 jQuery 图像预加载器

Question

我正在尝试找到一个与 Marcofolio 幻灯片配合良好的 jQuery 图像预加载器（此处 http:// /www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html）。

费城网站上也使用了相同的幻灯片：http://www.visitphilly.com/ -但是当我使用我的网络开发工具查看工作中的 javascript 时，我很难弄清楚预加载器被调用的确切位置。

我还尝试使用以下预加载代码，但它似乎对这种情况没有帮助（似乎在 Safari 浏览器中加载速度最慢）：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
    });
  }

  preload([
   'images/image1.jpg',
   'images/image2.jpg',
   'images/image3.jpg',
   'images/image4.jpg',
  ]);

如果聪明的人可以检查访问费城网站元素，他们可能能够看到我正在做什么所以显然这里失踪了。或者，预加载插件建议将不胜感激，因为我已经尝试了一些似乎对这个特定幻灯片没有帮助的插件。

谢谢你！

Answer 1

你不需要 jQuery：

var images = [
    'a.png',
    'b.png'//etc
];

var path = 'images/';
var i, image, img;
for(i = 0; image = images[i]; i++) {
    img = new Image();
    img.src = path + image;
}

Answer 2

尝试以正确的顺序预加载图像。

function preload(arrayOfImages) {
    var i = 0;

    function preloadnext() {
        if (i < arrayOfImages.length) {
            var img = new Image();
            img.onload = preloadnext;
            img.src = arrayOfImages[++i];
        }
    }

    preloadnext();
}

您还可以指定图像大小（“新图像（宽度，高度）”），但我不确定它是否有帮助。

Answer 3

我一直使用这个很棒的插件： http://flesler.blogspot.com/2008/ 01/jquerypreload.html

$.preload([ 'red', 'blue', 'yellow' ], {
    base:'images/colors/',
    ext:'.jpg'
});

除了编码良好之外，该插件处理的 ie 中预加载图像还存在问题。