jQuery Cycle Plugin: Как предварительно загрузить первые изображения с загрузочным фоновым GIF, а затем исчезнуть в Cycle Slideshow?

Question

Я борюсь с этим, может быть, некоторые из вас могут помочь ...

• У меня есть слайд-шоу на домашней странице с большими изображениями на www.theoribeiro.com с использованием плагина jQuery Cycle

• Изображения большие и иногда с медленными соединениями (но даже с быстрыми) поведение при запуске слайд-шоу довольно уродливо, показывая изображение внезапно или наполовину загруженным.

• Я хочу убедиться, что по крайней мере 2 или 3 первых изображения загружены до начала слайд-шоу, и в то же время я хочу запустить загрузочный анимированный GIF, затем я хочу исчезнуть на первом изображении.

Я много искал в Интернете и на форумах и перепробовал множество вещей с моими ограниченными знаниями javascript и jQuery, но не смог найти решение.

Любая помощь будет принята с благодарностью !!!

Answer 1

Не инициализируйте плагин Cycle, пока не загрузите ваши изображения. Используйте такой скрипт предварительной загрузки - http://jquery -howto.blogspot.com / 2009/02 / preload-images-with-jquery.html и после того, как у вас будет 2-3 изображения, которые вы скрываете может инициализировать плагин Cycle. Поскольку ваши изображения уже находятся в кэше, у вас не должно быть проблем с половиной показанных изображений. По умолчанию отображает загружаемое изображение и скрывает его после инициализации плагина Cycle.

// В ответ на первый комментарий

Вы можете использовать такой плагин, как это - http://plugins.jquery.com/project/ImageLoader и использовать PHP для генерации JavaScript. Например:

$("#slideShow").imageLoader({
   images: [
    <?php
        // You can populate this array from readin a directory or manually it is your choice.
        $images = array('1.jpg', '2.jpg');
        $l = count($images);
        for(int $i=1; $i<$l; $i++) {
            echo ($i>0 ? ',' : '') . "{src: '" . $v . "'}";
        }
    ?>
    ]}, function () {
        $('#slideShow').cycle();
    });