Flexslider - last image not lazy loading

Question

I have a Flexslider gallery here that uses lazy loading together with picturefill that works pretty well, thanks to previous posts from the community here.

Only problem I have is when I click on the last thumbnail of my gallery the slider slides to that slide but nothing is loaded yet. Can anyone help me with the logic here?

I'm thinking maybe check that the thumb that was clicked has a loaded image before sliding there if not, load the image and the do your thing?

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');
    }
  });

Answer 1

Scrapped all the custom before and start code and went with this solution. Works well. Thanks aFarkas - lazysizes