JQuery image crossfade с предварительным загрузчиком

Ответ 1

Я думаю, вы все еще можете сделать это с помощью плагин цикла jQuery; кроме предварительной загрузки изображений, даже версия lQuery cycle lite делает все, что вам нужно по умолчанию из коробки.

И если вы посмотрите здесь, вы увидите, что довольно просто добавить немного Javascript который добавит изображения (после первых двух) при загрузке. Вам нужно немного изменить код (вместо stack.push(this), например, вам нужно что-то вроде stack.push("<div style="background-image:url("+img.src+")"></div>")), но я думаю, что это полностью выполнимо.

Изменить: здесь ссылка на вопрос SO о том, как сделать div в ссылку с кликом.

Edit 2: Мне понравилась идея Джозефа, чтобы просто переместить элементы в скрытый DIV, поэтому я немного обновил свой код. Теперь он также сохраняет ссылки, на которые каждый div указывает: http://jsfiddle.net/g4Hmh/9/

Изменить 3: Последнее обновление! http://jsfiddle.net/g4Hmh/12/

Ответ 2

Ну вот, здесь я ткнул. Прелоадер находится в ваниле js, а цикл слайд-шоу - в jQuery. Это очень просто реализовать, и концепция еще проще.

Демо

очень простая демонстрация, которая иллюстрирует подход к манипулированию DOM

HTML

<!-- not much here... just a container -->
<div id="content"></div>

CSS

/* just the important stuff here.  The demo has example styling. */
#content
{
    position:relative;
}
#content img
{
    position:absolute;
}

JavaScript/JQuery

// simple array
var images = [
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003t.jpg",
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005t.jpg",
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001t.jpg"
];

// some adjustable variables
var delay = 2000;
var transition = 1000;

// the preloader
for(var i in images)
{
    var img = document.createElement("img");
    img.src = images[i];
    img.onload = function(){
        var parent = document.getElementById("content");
        parent.insertBefore(this,parent.childNodes[0]);
        if(i == images.length - 1)
        {
            i = 0;
            startSlides();
        }
    }
}

// and the actual loop
function startSlides()
{
    $("#content img:last").delay(delay).fadeTo(transition,0,function(){
        $(this).insertBefore($(this).siblings(":first")).fadeTo(0,1);
        startSlides();
    });
}

Вкратце понятие состоит в том, чтобы затухать первое изображение в контейнере, после полного изменения его положения в DOM (эффективно скрывая его за равными братьями поровну на уровне дерева) и снова вызвать функцию. Причина этого заключается в том, что он только угасает первого дочернего элемента контейнера, но при обратном вызове он изменяет то, что node, которое постоянно зацикливает узлы. Это делает очень маленький исходный файл, который достаточно эффективен.

РЕДАКТИРОВАТЬ 1:

и 32-минутная настройка...

Демо 2

ИЗМЕНИТЬ 2:

My oh настолько простой script теперь очень сложный: P Я добавил некоторые функции масштабирования, которые работают только в современных браузерах, но при необходимости. У этого также есть загрузочный бар, поскольку он предварительно загружает изображения (может или не желательно: P)

небольшая демонстрация изображений

большая демонстрация изображений

Ответ 3

UPDATE Добавлена ​​возможность загрузки асинхронно.

Достаточно обертки для плагина цикла jQuery. Вам действительно нужно что-то, что отслеживает загрузку изображений, а затем вызывает $(elem).cycle(/* options */). Вот мой прием:

$.fn.cycleWhenLoaded = function(options) {
    var target = this,
        images = options.images,
        loaded = 0,
        total  = 0,
        i;

    if(images) {
        for(i = 0; i < images.length; i ++) {
            $('<img/>').attr('src', images[i]).appendTo(target);
        }
    }

    this.find('> img').each(function(index) {
        var img = new Image(),
            source = this;

        total ++;

        if(index > 1)
            $(this).hide();

        img.onload = function() {
            loaded ++;
            if(loaded == total) {
                target.trigger('preloadcomplete');
                target.cycle(options);
            }
        };

        setTimeout(function() {img.src = source.src}, 1);
    });

    return this;
};

Это позволяет либо выполнить простую задержку:

$('.slideshow').cycleWhenLoaded({
    fx: 'fade'
});

Или вы можете сделать что-то более сложное и загрузить изображения в script и захватить событие завершения предварительной загрузки:

$('.slideshow2').hide().cycleWhenLoaded({
    fx: 'fade',
    images: [
        "http://cloud.github.com/downloads/malsup/cycle/beach1.jpg",
        "http://cloud.github.com/downloads/malsup/cycle/beach2.jpg",
        "http://cloud.github.com/downloads/malsup/cycle/beach3.jpg",
        "http://cloud.github.com/downloads/malsup/cycle/beach4.jpg",
        "http://cloud.github.com/downloads/malsup/cycle/beach5.jpg"
    ]
}).bind('preloadcomplete', function() { $(this).show(); });

Вы можете увидеть это в действии здесь: http://fiddle.jshell.net/vmAEW/1/

Ответ 4

Я не знаю, насколько это близко к тому, что вы ищете, но я подумал, что больше никто не попытался бы помочь. http://galleria.aino.se/

Он, по крайней мере, имеет предварительный загрузчик и переход на затухание.