Попытка найти предварительный загрузчик изображений jQuery

Question

Я пытаюсь найти работающий предварительный загрузчик изображений jQuery, который хорошо сочетается со слайд-шоу Marcofolio (здесь http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html).

Такое же слайд-шоу используется на сайте Филадельфии здесь: http://www.visitphilly.com/ -но когда я использую инструменты веб-разработчика для просмотра javascript на работе, мне трудно понять, где именно вызывается preloader.

Я также попытался использовать следующий код предварительной загрузки, нопохоже, это не помогает ситуации (кажется, что загружается в браузере 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

Я всегда использовал этот фантастический плагин: http://flesler.blogspot.com/2008/01/jquerypreload.html

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

Помимо того, что он хорошо закодирован - существуют проблемы с предварительной загрузкой изображений, т. Е. С этим плагином связан.

Answer 3

Попробуйте предварительно загрузить изображения в правильном порядке.

function preload(arrayOfImages) {
    var i = 0;

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

    preloadnext();
}

Вы также можете указать размер изображения («новое изображение (ширина, высота)»), но я не уверен, что это поможет.