From 6b3efbef8bad996a6048668f723d90ee631da54c Mon Sep 17 00:00:00 2001 From: Nathan Grebowiec Date: Fri, 12 Sep 2014 14:20:40 -0500 Subject: [PATCH 1/2] add support for random increment per image --- comcastify.js | 7 ++++++- example/example-random.html | 40 +++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 example/example-random.html diff --git a/comcastify.js b/comcastify.js index 54f9474..ffea8d5 100644 --- 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 new file mode 100644 index 0000000..cc36cf4 --- /dev/null +++ b/example/example-random.html @@ -0,0 +1,40 @@ + + + + comcastify.js - Sometimes images just load too damned fast! + + + + + +
+ http://violetadams.deviantart.com/art/Baby-sloth-385183627 +
+ +
+ http://mashable.com/2013/07/20/sloth-makeover/ +
+ +
+ http://mashable.com/2013/07/20/sloth-makeover/ +
+ +
+ http://www.wisegeek.com/what-are-the-main-components-of-a-sloth-diet.htm#sloth-in-tree-showing-claws +
+ + + + + + + \ No newline at end of file From c25dc0582ecf6e21e601acf38fb3ac75569270c1 Mon Sep 17 00:00:00 2001 From: Nathan Grebowiec Date: Fri, 12 Sep 2014 15:30:21 -0500 Subject: [PATCH 2/2] add support for random pauses during the load --- comcastify.js | 26 ++++++++++---------- example/example-randompause.html | 41 ++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 example/example-randompause.html diff --git a/comcastify.js b/comcastify.js index ffea8d5..3101edc 100644 --- a/comcastify.js +++ b/comcastify.js @@ -3,21 +3,22 @@ var comcastifyjs = (function () { var slowloadModiferCallback = function (slowloadDiv, args) { return function () { (function (slowloadDiv, args) { - // calculate new height - var newTopClip = slowloadDiv.slothifyData.imageTopClip + args.loadIncrement; var img = slowloadDiv.slothifyData.img; - slowloadDiv.style.width = img.offsetWidth + 'px'; - slowloadDiv.style.height = img.offsetHeight + 'px'; - slowloadDiv.style.top = img.offsetTop + 'px'; - slowloadDiv.style.left = img.offsetLeft + 'px'; + var newTopClip = slowloadDiv.slothifyData.imageTopClip + args.loadIncrement; + if (args.randomPause === 0.0 || Math.random() > args.randomPause) { + slowloadDiv.style.width = img.offsetWidth + 'px'; + slowloadDiv.style.height = img.offsetHeight + 'px'; + slowloadDiv.style.top = img.offsetTop + 'px'; + slowloadDiv.style.left = img.offsetLeft + 'px'; - // update slowload div - slowloadDiv.style.clip = 'rect(' + newTopClip + 'px auto auto auto)'; + // update slowload div + slowloadDiv.style.clip = 'rect(' + newTopClip + 'px auto auto auto)'; + + // check stopping conditions + var maxImageHeight = img.height * args.loadMaxPercent; + } - // check stopping conditions - var maxImageHeight = img.height * args.loadMaxPercent; - if (!img.complete) { setTimeout(slowloadModiferCallback(slowloadDiv, args), args.loadSpeed); } else if (typeof img.naturalHeight !== "undefined" && img.naturalWidth === 0) { @@ -47,7 +48,8 @@ var comcastifyjs = (function () { boxColor: args.boxColor || '#000000', // color of box overlay loadMaxPercent: args.loadMaxPercent || 0.0, // max percentage to load images loadSpeed: args.loadSpeed || 500, // how often in ms to pass - loadIncrement: args.loadIncrement || 1 // pixels to load per pass + loadIncrement: args.loadIncrement || 1, // pixels to load per pass + randomPause: args.randomPause || 0.0 // percentage of a change of a skipped frame }; // make 'em load slow diff --git a/example/example-randompause.html b/example/example-randompause.html new file mode 100644 index 0000000..02704e5 --- /dev/null +++ b/example/example-randompause.html @@ -0,0 +1,41 @@ + + + + comcastify.js - Sometimes images just load too damned fast! + + + + + +
+ http://violetadams.deviantart.com/art/Baby-sloth-385183627 +
+ +
+ http://mashable.com/2013/07/20/sloth-makeover/ +
+ +
+ http://mashable.com/2013/07/20/sloth-makeover/ +
+ +
+ http://www.wisegeek.com/what-are-the-main-components-of-a-sloth-diet.htm#sloth-in-tree-showing-claws +
+ + + + + + + \ No newline at end of file