Плагин jQuery Cycle: как предварительно загрузить первые изображения с загружаемым фоновым gif, а затем исчезнуть в циклическом слайд-шоу?

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

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

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

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

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

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


person Theo Ribeiro    schedule 06.04.2010    source источник
comment
возможный дубликат предварительной загрузки изображений для плагина jQuery Cycle   -  person sje397    schedule 05.10.2010


Ответы (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();
    });
person Ivo Sabev    schedule 06.04.2010
comment
Привет Иво! Большое спасибо за быстрый ответ! Я просмотрел ссылку, которую вы прислали, но я не совсем понимаю, как она может работать для меня, потому что: - мои html-страницы создаются динамически через PHP, поэтому я не знаю точные изображения, которые мне нужно предварительно загрузить, чтобы специально вызывать их в Предварительная загрузка jQuery. -Я могу изменить вывод PHP, чтобы изображения были ссылками в тегах привязки, элементах списка, div или что-то еще, но я не могу заранее знать, что это за изображения. - У меня очень ограниченные знания в jQuery или Javascript, хотя я создал всю свою страницу. Если кто-то захочет чему-то научить, я обязательно научусь! Спасибо!! - person Theo Ribeiro; 07.04.2010
comment
Я изменил свой ответ, чтобы решить ваши проблемы. - person Ivo Sabev; 07.04.2010
comment
Привет, Иво! Большое спасибо за отзыв. Я рассмотрю это, хотя я также буду продолжать искать 100% -ное решение jQuery, не возясь с файлами PHP, поскольку я бы предпочел только изменить вывод контейнера изображения в PHP... Это потому, что я использую плагин wordpress (NextGen Gallery) для создания списка изображений, а работа с плагином PHP усложняет обновление и т. д. в будущем. Чистое решение jQuery было бы красивым и чистым! :) Большое спасибо! - person Theo Ribeiro; 07.04.2010