javascript - Image data tag not switching on load/resize -

i'm writing own starter code images involves getting window size , replacing img src either data-medium or data-original depending on window size. i'm including waypoints scroll fades in images.

i have jsfiddle set > https://jsfiddle.net/qkguedu9/ issue – regardless of window size, pulling in data-medium image. have included js below essentially, this, shouldn't going wrong.

var browser_width,     browser_height;  // resizehandler = function() {     browser_width = $(window).width();     browser_height = $(window).height(); }  // $.fn.loadimage = function() {         return this.each(function() {          if (browser_width > 768) {             var toload = $(this).data('original');         } else {             var toload = $(this).data('medium');         }          var $img = $(this);          $('<img />').attr('src', toload).imagesloaded(function() {             $img.attr('src', toload).addclass('loaded').removeclass('loading');         });      });  };  // $(document).ready(function() {      resizehandler();      //     $('.lazy').each(function() {         var $img = $(this);         $img.waypoint(function() {             $img.loadimage();         }, { offset: '125%' });     });  }); 

it looks caching problem. not sure why that's happening, may race condition of sort. if check window width on if statement, works correctly.

$.fn.loadimage = function() {     return this.each(function() {      if ($(window).width() > 768) {         var toload = $(this).data('original');     } else {         var toload = $(this).data('medium');     }      var $img = $(this);      $('<img />').attr('src', toload).imagesloaded(function() {         $img.attr('src', toload).addclass('loaded').removeclass('loading');     });  }); 

};

here's fiddle works:

https://jsfiddle.net/qkguedu9/1/