Question

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

同样的幻灯片正在费城网站上使用：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',
  ]);

如果聪明的人可以检查visitphilly网站元素，他们可能会看到我在这里显然缺少的东西。或者，我会赞赏一个预加载插件建议，因为我尝试了一些似乎不能帮助这个特定幻灯片显示的建议。

谢谢！

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

除了编码良好的事实之外，还存在预装图像的问题，即此插件处理的问题。

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

3 个答案: