add support for random increment per image

theonion · Sep 12, 2014 · 6b3efbe · 6b3efbe
1 parent c7a823d
commit 6b3efbe
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/comcastify.js b/comcastify.js
@@ -80,8 +80,13 @@ var comcastifyjs = (function () {
         img.style.visibility = 'visible';
 
         if (params.loadMaxPercent > 0.0) {
+            var passedParams = Object.create(params);
+            if(passedParams.loadIncrement === 'random') {
+              passedParams.loadIncrement = Math.floor((Math.random() * 20) + 1);
+            }
+
             // slowload using timeout since this is nicer to the browser :)
-            setTimeout(slowloadModiferCallback(slowload, params), params.loadSpeed);
+            setTimeout(slowloadModiferCallback(slowload, passedParams), params.loadSpeed);
         }
       }
     }

diff --git a/example/example-random.html b/example/example-random.html
@@ -0,0 +1,40 @@
+<html>
+    <head>
+
+        <title>comcastify.js - Sometimes images just load too damned fast!</title>
+
+    </head>
+
+    <body>
+
+        <div style="width: 100px; display: inline-block;">
+            <img style="width:100%" src="baby-sloth.jpg" alt="http://violetadams.deviantart.com/art/Baby-sloth-385183627" />
+        </div>
+
+        <div style="width: 100px; display: inline-block;">
+            <image style="width: 100%" src="sloth-close-up.jpg" alt="http://mashable.com/2013/07/20/sloth-makeover/" />
+        </div>
+
+        <div style="width: 100px; display: inline-block;">
+            <image style="width: 100%" src="sloth-hanging.jpg" alt="http://mashable.com/2013/07/20/sloth-makeover/" />
+        </div>
+
+        <div>
+            <img src="sloth.jpg" alt="http://www.wisegeek.com/what-are-the-main-components-of-a-sloth-diet.htm#sloth-in-tree-showing-claws" />
+        </div>
+
+        <script type="text/javascript" src="../comcastify.js"></script>
+        <script type="text/javascript">
+
+            window.onload = comcastifyjs.fixMyImagesLoadingSoFast({
+                boxColor: '#123456',
+                loadMaxPercent: 0.75,
+                loadSpeed: 100,
+                loadIncrement: 'random'
+            });
+
+        </script>
+
+    </body>
+
+</html>