Lazy Загрузка в Flexslider

Ответ 1

Итак, я добавил реальную страницу изображения к атрибуту data-attr в теге изображения и в пожаре событий after Я нашел бы изображение с классом active и установил атрибут img src равным значению data-attr.

Ответ 2

Я выполнял ленивую загрузку во время прокрутки. Это решение работает лучше для больших коллекций по сравнению с другими предлагаемыми здесь решениями. Во время инициализации он загружает только первые 5 изображений, а затем загружает 3 изображения для каждой анимации.

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li> 

и код javascript:

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        controlNav: false,
        init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,5).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,3).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        }
    });

Ответ 3

Метод работает очень хорошо для меня, но загружаемое изображение должно быть того же размера, что и остальные изображения. Я действительно использую http://imageresizing.net/ с помощью mode = pad

В основном контейнере, который вы используете для flexslider, поместите фактическое изображение в атрибут "data-src"

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>            

В функции инициализации используйте обратный вызов "start", чтобы заменить загружаемое изображение фактическим изображением и удалить атрибут

$('#slider').flexslider({
    start: function (slider) {
       // lazy load
       $(slider).find("img.lazy").each(function () {
          var src = $(this).attr("data-src");
          $(this).attr("src", src).removeAttr("data-src");
       });
     }
});

Надеюсь, это поможет кому-то.

Ответ 4

Я пытаюсь сделать то же самое, используя Flexslider 2 и Lazy Load Plugin для jQuery.

Кажется, что свойство container работает только в том случае, если элемент имеет стиль overflow:scroll;

Мне удалось получить ленивую нагрузку, используя этот код:

$("#flexcontainer img.lazy").lazyload({
    failure_limit : 10,
    effect: "fadeIn",
    skip_invisible : false
});

Однако, это просто ленивые нагрузки все сразу, а не как анимация flexslider.

Мне также удалось заставить его работать с мышью над этим кодом:

 $("#flexcontainer img.lazy").lazyload({
     failure_limit : 10,
     effect: "fadeIn",
     event : "mouseover"
 });

Однако это не работает на сенсорных устройствах.

Я думаю, что ключ заключается в создании собственного пользовательского события и его срабатывании после обратного вызова flexslider, такого как обратный вызов after.

Ответ 5

Для того, чтобы предложить альтернативное решение - еще один вариант - использовать чувствительный слайдер, который уже имеет ленивую загрузку, встроенную в него, например королевский слайдер, вот ссылка → http://dimsemenov.com/plugins/royal-slider/

Ответ 6

Вы также можете инициализировать lazyload с помощью настраиваемого события триггера...

$jQ("img[data-original]").lazyload({
            effect: "fadeIn",
            skip_invisible: false,
            event: "forceLazyLoad"
        });

... и затем вызовите это событие, чтобы предварительно загрузить все ваши изображения внутри flexslider с помощью вызова типа:

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');