Lazy loading flexslider

Question

My Javascript skills are beginner at best but I've tried to implement the lazy loading flexslider solution from here. The slider and loading work well, however when the slider has cycled once I'm getting console errors:

"Uncaught TypeError: Cannot call method 'removeAttr' of undefined"

My JS is sitting in the head:

JS

  <script type="text/javascript" charset="utf-8">
     $(window).load(function() {
        $('.projcontainer').flexslider({
           slideshow: false,
           after: function(slider) {
              var slides = slider.slides,
                      index = slider.animatingTo,
                      $slide = $(slides[index]),
                      $img = $slide.find('img[data-src]');
              if ($img) {
                 $img.attr("src", $img.attr('data-src')).removeAttr("data-src");
              }
           }
        });
     });
  </script>

Html:

<li>
   <img class="lazy" src="loading.gif" data-src="myimage.png"/>
</li>

With limited knowledge I know that I need to complete the "else if" statement but it isn't happening for me. Any help would be greatly appreciated.

Answer 1

Change if ($img) to if ($img.length). Your if condition will always pass, since $img is never null (its a jQuery object).