Ленивая загрузка в Flexslider

Я реализовал ленивую загрузку во время прокрутки. Это решение работает лучше для больших коллекций по сравнению с другими решениями, предложенными здесь. Во время инициализации загружаются только первые 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");
            });
        }
    });

У меня этот метод работает очень хорошо, но загружаемое изображение должно быть того же размера, что и остальные изображения. На самом деле я использую 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");
       });
     }
});

Я надеюсь, что это помогает кому-то.

Я пытаюсь сделать то же самое, используя Flexslider 2 и Подключаемый модуль отложенной загрузки для 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.

Ради предложения альтернативного решения - другой вариант - использовать адаптивный слайдер, в который уже встроена ленивая загрузка, например королевский слайдер, вот ссылка -> http://dimsemenov.com/плагины/royal-slider/

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

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

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

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

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