Presenting both strategies on the demo page

thom4parisot · Aug 29, 2013 · 2a9ef71 · 2a9ef71
1 parent 67b921d
commit 2a9ef71
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 35 deletions.
diff --git a/Demo - Grunt/index.html b/Demo - Grunt/index.html
@@ -11,34 +11,22 @@ <h1>Imager.js</h1>
         <p>Here we're using Grunt to generate a list of image sizes for us.</p>
         <p>We then pass those sizes into Imager</p>
 
-        <div class="delayed-image-load" data-src="Assets/Images/Generated/A-320.jpg" data-width="1024"></div>
-        <div class="delayed-image-load" data-src="Assets/Images/Generated/B-320.jpg" data-width="1024"></div>
-        <div class="delayed-image-load" data-src="Assets/Images/Generated/C-320.jpg" data-width="1024"></div>
+        <div class="delayed-image-load" data-src="Assets/Images/Generated/A-{width}.jpg" data-width="1024"></div>
+        <div class="delayed-image-load" data-src="Assets/Images/Generated/B-{width}.jpg" data-width="1024"></div>
+        <div class="delayed-image-load" data-src="Assets/Images/Generated/C-{width}.jpg" data-width="1024"></div>
 
-        <script src="../Imager.js"></script>
+        <script src="../src/imager.js"></script>
+        <script src="../src/strategies/legacy.js"></script>
         <script>
-            var imager = new Imager({
-                availableWidths: [320, 640, 1024],
-
-                /*
-                    This regex captures 3 pieces of information:
-
-                    1. the path to the image -> Assets/Images/Generated/
-                       ^(Assets\/Images\/Generated\/)
-
-                    2. the start of the file name -> A-, B-, C-
-                       (\w-)
-
-                    3. the file extension -> .jpg
-                       (\.(?:jpg|png|gif))$
-
-                    The only other part of the regex isn't captured and that is the number specified in the file name.
-
-                    One other thing to note is the use of the non-capturing group -> (?: )
-                    This means we can use parenthesis as a way to 'group' a part of the regex without needing to capture it
-                 */
-                regex: /^(Assets\/Images\/Generated\/)(\w-)\d+(\.(?:jpg|png|gif))$/i
-            });
+            var elements = document.querySelectorAll('.delayed-image-load'),
+                imager = Imager.init(elements, {
+                    availableWidths: [320, 640, 1024],
+                    strategy: 'legacy'
+                }),
+                replace = (function(imgr){ return function(){ imgr.process(); }; })(imager);
+
+            window.addEventListener('resize', replace);
+            window.addEventListener('orientationchange', replace);
         </script>
     </body>
-</html>
+</html>
diff --git a/Demo/index.html b/Demo/index.html
@@ -14,13 +14,34 @@ <h1>Imager.js</h1>
         <img src="http://placehold.it/340">
 
         <p>Below are three <code>&lt;div&gt;</code> elements that are enhanced using Imager.js and so they will lazy-load more images (as long as JavaScript is enabled).</p>
-        <div class="delayed-image-load" data-src="http://placehold.it/340" data-width="340"></div>
-        <div class="delayed-image-load" data-src="http://placehold.it/340" data-width="340"></div>
-        <div class="delayed-image-load" data-src="http://placehold.it/340" data-width="340"></div>
 
-        <script src="../Imager.js"></script>
+        <div class="strategy-legacy">
+            <h2>BBC Strategy</h2>
+            <div class="delayed-image-load" data-src="http://placehold.it/{width}/000.jpg" data-width="340"></div>
+            <div class="delayed-image-load" data-src="http://placehold.it/{width}/111.jpg" data-width="340"></div>
+            <div class="delayed-image-load" data-src="http://placehold.it/{width}" data-width="340"></div>
+        </div>
+
+        <div class="strategy-container">
+            <h2>Enclosing DIV Strategy</h2>
+            <div class="delayed-image-load" data-src="http://placehold.it/{width}/000.jpg" data-width="340"></div>
+            <div class="delayed-image-load" data-src="http://placehold.it/{width}/111.jpg" data-width="340"></div>
+            <div class="delayed-image-load" data-src="http://placehold.it/{width}" data-width="340"></div>
+        </div>
+
+
+        <script src="../src/imager.js"></script>
+        <script src="../src/strategies/legacy.js"></script>
+        <script src="../src/strategies/container.js"></script>
         <script>
-            var imager = new Imager();
+            ['legacy', 'container'].forEach(function(strategy){
+                var elements = document.querySelectorAll('.strategy-'+strategy+' .delayed-image-load'),
+                    imager = Imager.init(elements, { strategy: strategy }),
+                    replace = (function(imgr){ return function(){ imgr.process(); }; })(imager);
+
+                window.addEventListener('resize', replace);
+                window.addEventListener('orientationchange', replace);
+            });
         </script>
     </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
       "test": "grunt test"
-  }
+  },
   "repository": {
       "type": "git",
       "url": "git://github.com/BBC-News/Imager.js.git"

diff --git a/src/strategies/legacy.js b/src/strategies/legacy.js
@@ -58,7 +58,7 @@
         placeholder.setAttribute('data-src', element.getAttribute('data-src'));
         placeholder.setAttribute('data-width', element.getAttribute('data-width'));
 
-        element.parentNode.replaceChild(placeholder, element);
+        return element.parentNode.replaceChild(placeholder, element);
     };
 
     /**