Flexslider - последнее изображение не ленивая загрузка

У меня есть галерея Flexslider, которая использует ленивую загрузку вместе с picturefill, которая работает довольно хорошо, благодаря предыдущим сообщениям от сообщества здесь.

Единственная проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на последнюю миниатюру моей галереи, ползунок перемещается на этот слайд, но еще ничего не загружается. Может ли кто-нибудь помочь мне с логикой здесь?

Я думаю, может быть, проверить, что на нажатом пальце есть загруженное изображение, прежде чем скользить туда, если нет, загрузите изображение и сделайте свое дело?

http://codepen.io/anon/pen/OVveXK

var mainSlide = $('#slider-main');
  var navSlide = $('#slider-nav');

  mainSlide.flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    start: function (slider) {
      navSlide.addClass('flex-attached');

      /* lazy load first image with picturefill */
      $(slider).find('.slides').children().eq(1).find('div.img span.lazy').each(function (i, elm) {
        var $elm = $(elm);
        var src = $elm.find('img').attr('data-src');
        $elm.find('img').attr('src', src);
        var content = $elm.html();
        var $pic = $('<picture id="' + $elm.attr('id') + '">' + content + '</picture>');
        var pic = $pic[0];
        $elm.after(pic);  // insert the picture
        $elm.remove();     // remove the span
        window.picturefill({ elements: [pic] });
      });
    },
    after: function (slider) {
      /* lazy load next image with picturefill */
      $(slider).find('.slides').children().eq(slider.animatingTo + 1).find('div.img span.lazy').each(function (i, elm) {
        var $elm = $(elm);
        var src = $elm.find('img').attr('data-src');
        $elm.find('img').attr('src', src);
        var content = $elm.html();
        var $pic = $('<picture id="' + $elm.attr('id') + '">' + content + '</picture>');
        var pic = $pic[0];
        $elm.after(pic);  // insert the picture
        $elm.remove();     // remove the span
        window.picturefill({ elements: [pic] });
      });
    }
  });

  navSlide.flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    asNavFor: '#slider-main',
    itemWidth: 120,
    itemMargin: 5,
    directionNav: false,
    start: function () {
      navSlide.addClass('flex-attached');
    }
  });

person wind_kind    schedule 08.07.2015    source источник


Ответы (1)


Отменил весь пользовательский код перед и запуска и пошел с этим решением. Работает хорошо. Спасибо aFarkas - lazysizes

person wind_kind    schedule 09.07.2015