Add dynamic resize image updating

I've had to change the array version of window sizes to use a different
setting so that you can have a custom function triggered when the
browser goes past steps

jquery.lazyLoader.js

@@ -9,9 +9,14 @@
 (function($){
     'use strict';
 
-    var DEFAULT_SETTINGS    = {
+    var $window = $(window),
+        lastResize,
+        throttleTimeout = 1000 / 60,
+
+        DEFAULT_SETTINGS    = {
             imageRegex: /(jpg|gif|png)$/i,
-            img: []
+            img: [],
+            steps: []
         },
         DATA_KEY = 'lazyLoader'
     ;
@@ -22,24 +27,26 @@
         this.$this = $(this.element);
 
         if (this.$this.data('img') || this.settings.imageRegex.test(this.element.href)) {
-            var src = this.getSrc(this.$this.data('img') || this.element.href);
+            this.originalSrc = this.$this.data('img') || this.element.href;
             this.addImage();
-            this.src(src);
+            this.src(this.getSrc(this.originalSrc));
         }
     };
     LazyLoader.prototype = {
+        originalSrc: '',
+        currentStep: 0,
         addImage: function(){
             this.$img = $('<img alt="' + this.$this.text() + '" />');
             this.$this.before(this.$img).remove();
         },
-        getSrc: function(url) {
-            var windowWidth = $(window).width(),
+        getSrc: function(url, winWidth) {
+            var windowWidth = winWidth || $window.width(),
                 suffix = ''
             ;
             if ($.isFunction(this.settings.img)) {
                 return this.settings.img.call(this, url, windowWidth);
-            } else {
-                $(this.settings.img).each(function(){
+            } else if (this.settings.steps.length) {
+                $(this.settings.steps).each(function(){
                     if (windowWidth >= this) {
                         suffix = '-' + this;
                     }
@@ -49,13 +56,43 @@
         },
         src: function(url){
             this.$img.attr('src', url);
+        },
+        updateStep: function(windowWidth) {
+            var step,
+                ln = this.settings.steps.length, i, itm;
+            for (i = 0; i < ln; i+=1) {
+                if (windowWidth >= this.settings.steps[i]) {
+                    step = this.settings.steps[i];
+                }
+            }
+            if (step && step !== this.currentStep) {
+                this.currentStep = step;
+                this.src(this.getSrc(this.originalSrc, windowWidth));
+            }
+            return step;
         }
     };
 
+    $window.resize(function(e){
+        if (!lastResize || new Date() > new Date(lastResize.getTime() + throttleTimeout)) {
+            var ln = $.lazyLoader.all.length, i, itm,
+                windowWidth = $window.width();
+            for (i = 0; i < ln; i+=1) {
+                $.lazyLoader.all[i].updateStep(windowWidth);
+            }
+        }
+    });
+
+    $.lazyLoader = {
+        all: [] // a holder for all the LazyLoaders
+    };
+
     $.fn.lazyLoader = function(options) {
         return this.each(function(){
-            var settings = $.extend({}, DEFAULT_SETTINGS, options);
-            $(this).data(DATA_KEY, new LazyLoader(this, settings));
+            var settings = $.extend({}, DEFAULT_SETTINGS, options),
+                loader = new LazyLoader(this, settings);
+            $(this).data(DATA_KEY, loader);
+            $.lazyLoader.all.push(loader);
         });
     };
 

readme.mkd

@@ -46,7 +46,7 @@ you can use the following.
     >my image</a>
 
     $('a').lazyLoader({
-        img: [768,990] // this must be sorted correctly
+        steps: [768,990] // this must be sorted correctly
     });
 
 Or it also supports dynamic urls so you don't need all those data attributes.

test/lazyLoader.spec.js

@@ -7,7 +7,8 @@ describe('lazyLoader', function () {
     beforeEach(function () {
         var self = this;
         jsdom.env('./test/SpecRunner.html', [
-            'http://code.jquery.com/jquery-1.5.min.js',
+            /*'http://code.jquery.com/jquery-1.5.min.js',*/
+            path.join(__dirname, '../lib/jquery-1.5.2.min.js'),
             path.join(__dirname, '../jquery.lazyLoader.js')
         ], function(errors, window){
             if (errors) {

test/responsive.spec.js

@@ -8,7 +8,7 @@ describe('responsive images', function () {
     beforeEach(function () {
         var self = this;
         jsdom.env('./test/SpecRunner.html', [
-            'http://code.jquery.com/jquery-1.5.min.js',
+            path.join(__dirname, '../lib/jquery-1.5.2.min.js'),
             path.join(__dirname, '../jquery.lazyLoader.js')
         ], function(errors, window){
             if (errors) {
@@ -43,7 +43,7 @@ describe('responsive images', function () {
         spyOn($.fn, 'width').andReturn(768);
         expect($(this.window).width()).toBe(768);
         $links.lazyLoader({
-            img: [768,990]
+            steps: [768,990]
         });
         expect($tablet.find('img').length).toBe(1);
         expect($tablet.find('img').attr('src')).toBe('test/myimage-768.jpg');
@@ -56,7 +56,7 @@ describe('responsive images', function () {
         spyOn($.fn, 'width').andReturn(990);
         expect($(this.window).width()).toBe(990);
         $links.lazyLoader({
-            img: [768,990]
+            steps: [768,990]
         });
         expect($desktop.find('img').length).toBe(1);
         expect($desktop.find('img').attr('src')).toBe('test/myimage-990.jpg');
@@ -80,6 +80,34 @@ describe('responsive images', function () {
         expect($container.find('img').length).toBe(1);
         expect($container.find('img').attr('src')).toBe('test/myimage-mega.jpg');
     });
+    it('should trigger a new src when window goes above step', function () {
+        var $ = this.window.$,
+            $container = $('#dynamic'),
+            $links = $container.find('a'),
+            loader,
+            $img
+        ;
+        var spy = spyOn($.fn, 'width').andReturn(320);
+
+        $links.lazyLoader({
+            img: function(url, windowWidth) {
+                if (windowWidth >= 768){
+                    return url.replace(/.(jpg|gif|png)$/i, '-mega.$1'); 
+                } else {
+                    return url;
+                }
+            },
+            steps: [768, 990]
+        });
+        $img = $container.find('img');
+
+        expect($img.length).toBe(1);
+        expect($img.attr('src')).toBe('test/myimage.jpg');
+
+        loader = $links.data().lazyLoader;
+        expect(loader.updateStep(768)).toBe(768);
+        expect($img.attr('src')).toBe('test/myimage-mega.jpg');
+    });
 });