jQuery цикл плагин с функциональностью AJAX - PullRequest
Новая
       22

jQuery цикл плагин с функциональностью AJAX

4 голосов
/ 04 марта 2011

У меня есть страница, на которой у меня будет несколько слайдеров изображений (например, 50 слайдеров + по 5-10 картинок в каждой).К сожалению, из-за этого огромного количества ползунков страница загружается очень медленно: - (

) До сих пор я использовал знаменитый плагин Cycle Plugin от JQuery от Malsup. Однако ему не хватает функциональности AJAX, так как для этого требуется картинкабыть загруженным до запуска функции цикла.

Я немного опытен, но мне не хватает времени, чтобы написать свою собственную библиотеку, соответствующую моим потребностям.

Отсюда вопрос, кто-нибудь знает о Jquery?плагин для скользящей картинки (загрузка Ajax)? Я искал по всему Интернету, но слишком много данных превосходит реальные результаты ..

Заранее спасибо!

1 Ответ

6 голосов
/ 04 марта 2011

Это своего рода хак, но он может сработать для вас, плагин слайдера поддерживает функцию «до» и «после», которую мы можем использовать, чтобы отложить загрузку изображений для вас.

с учетом следующей разметки: 

<div id="s1" class="pics">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
</div>

Обратите внимание, что первые два имеют действительный src attr, но остальные - asrc, который не загружается через браузер.

Теперь с помощью функции before и after мы можем воспользоваться этим и переключить asrc на реальный src, который заставит браузер запрашивать изображение. 

$('#s1').cycle({
    fx: 'shuffle',
    speed: 'fast',
    timeout: 0,
    next: '#next2',
    prev: '#prev2',
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        if ($(nextSlideElement).attr("asrc")) {
            $(nextSlideElement).attr("src", $(nextSlideElement).attr("asrc"));
        }
    },
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        if ($(nextSlideElement).attr("asrc")) {
            $(nextSlideElement).attr("src", $(nextSlideElement).attr("asrc"));
        }
    }
});

Пример этого на jsfiddle .

...