From 1344fc26b4398fe4b6d3ca31098b03c6f10082d2 Mon Sep 17 00:00:00 2001 From: Nathan Grebowiec Date: Mon, 15 Sep 2014 13:57:26 -0500 Subject: [PATCH 1/2] add support for progressive JPEG emulation --- README.md | 1 + comcastify.js | 65 ++++++++++++++++++++++++++-- example/example-progressivejpeg.html | 42 ++++++++++++++++++ 3 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 example/example-progressivejpeg.html diff --git a/README.md b/README.md index 48f31eb..0c0b9ef 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ With all this internet going around, sometimes you just want to experience the t * **randLoadIncrement** Set to true to make load increment random, loadIncrement ignored in this case. * **loadIncrement** Number of pixels to load each time the loadSpeed timer ticks. * **randomPause** Probability of skipping a pass each time the loadSpeed timer ticks. + * **progressiveJPEG** Set to true to enable progressive JPEG emulation ## See it in action! See an example on the project's site at: http://theonion.github.io/comcastifyjs/ diff --git a/comcastify.js b/comcastify.js index 73ebdc1..20c46a2 100644 --- a/comcastify.js +++ b/comcastify.js @@ -7,6 +7,7 @@ var comcastifyjs = (function () { // calculate new height for box based on args var img = slowloadDiv.slothifyData.img; var newTopClip = slowloadDiv.slothifyData.imageTopClip + args.loadIncrement; + var progressiveJPEGInProgress = false; if (args.randomPause === 0.0 || Math.random() > args.randomPause) { slowloadDiv.style.width = img.offsetWidth + 'px'; slowloadDiv.style.height = img.offsetHeight + 'px'; @@ -20,11 +21,36 @@ var comcastifyjs = (function () { var maxImageHeight = img.height * args.loadMaxPercent; } + //process progressive JPEG unblurring + if (args.progressiveJPEG && newTopClip >= maxImageHeight) { + var newTopClipBlur = slowloadDiv.slothifyData.blurImageTopClip + args.loadIncrement; + + //continue to honor the randomPause setting + if (args.randomPause === 0.0 || Math.random() > args.randomPause) { + slowloadDiv.slothifyData.blurImg.style.width = img.offsetWidth + 'px'; + slowloadDiv.slothifyData.blurImg.style.height = img.offsetHeight + 'px'; + slowloadDiv.slothifyData.blurImg.style.top = img.offsetTop + 'px'; + slowloadDiv.slothifyData.blurImg.style.left = img.offsetLeft + 'px'; + + // update slowload div + slowloadDiv.slothifyData.blurImg.style.clip = 'rect(' + newTopClipBlur + 'px auto auto auto)'; + + slowloadDiv.slothifyData.blurImageTopClip = newTopClipBlur; + } + + // check stopping conditions + var maxImageHeightBlur = img.height * args.loadMaxPercent; + + if (newTopClipBlur < maxImageHeightBlur) { + progressiveJPEGInProgress = true; + } + } + if (!img.complete) { setTimeout(slowloadModiferCallback(slowloadDiv, args), args.loadSpeed); } else if (typeof img.naturalHeight !== "undefined" && img.naturalWidth === 0) { setTimeout(slowloadModiferCallback(slowloadDiv, args), args.loadSpeed); - } else if (!maxImageHeight || maxImageHeight === 0 || newTopClip < maxImageHeight) { + } else if (!maxImageHeight || maxImageHeight === 0 || newTopClip < maxImageHeight || progressiveJPEGInProgress) { // create new update timeout slowloadDiv.slothifyData.imageTopClip = newTopClip; setTimeout(slowloadModiferCallback(slowloadDiv, args), args.loadSpeed); @@ -46,15 +72,23 @@ var comcastifyjs = (function () { return function () { var params = { - elements: args.elements || document.getElementsByTagName('img'), // elements affected 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 randLoadIncrement: args.randLoadIncrement || false, // true to randomize load increment loadIncrement: args.loadIncrement || 1, // pixels to load per pass - randomPause: args.randomPause || 0.0 // probability of skipping a pass + randomPause: args.randomPause || 0.0, // probability of skipping a pass + progressiveJPEG: args.progressiveJPEG || false // enable progressive JPEG emulation }; + // generate a list of effected elements based on progressiveJPEG argument + if (params.progressiveJPEG) { + // this branch doesn't generate a live HTMLCollection, so images added after page load will not automatically load at Comcast speeds + params.elements = args.elements || document.querySelectorAll('img:not([class="progessiveJPEGemulator"])'); + } else { + params.elements = args.elements || document.getElementsByTagName('img'); + } + // make 'em load slow for(var i = 0; i < params.elements.length; i++) { // get some things we need @@ -78,6 +112,31 @@ var comcastifyjs = (function () { maxImageHeight: img.height * params.loadMaxPercent }; + // setup the blurred image for progressive JPEG if needed + if (params.progressiveJPEG === true) { + var progressiveJPEGdiv = document.createElement('DIV'); + progressiveJPEGdiv.style.backgroundColor = params.boxColor; + progressiveJPEGdiv.style.width = img.offsetWidth + 'px'; + progressiveJPEGdiv.style.height = img.offsetHeight + 'px'; + progressiveJPEGdiv.style.position = 'absolute'; + progressiveJPEGdiv.style.top = img.offsetTop + 'px'; + progressiveJPEGdiv.style.left = img.offsetLeft + 'px'; + progressiveJPEGdiv.style.clip = 'rect(0 auto auto auto)'; + progressiveJPEGdiv.style.overflow = 'hidden'; + + var progressiveJPEGimg = document.createElement('IMG'); + progressiveJPEGimg.setAttribute('class','progressiveJPEGemulator'); + progressiveJPEGimg.setAttribute('src',img.src); + progressiveJPEGimg.setAttribute('style','margin: -2px 0 0 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);'); + progressiveJPEGimg.setAttribute('width', progressiveJPEGdiv.style.width); + progressiveJPEGimg.setAttribute('height', progressiveJPEGdiv.style.height); + progressiveJPEGdiv.appendChild(progressiveJPEGimg); + parent.appendChild(progressiveJPEGdiv); + + slowload.slothifyData.blurImg = progressiveJPEGdiv; + slowload.slothifyData.blurImageTopClip = 0; + } + // put box over image parent.appendChild(slowload); diff --git a/example/example-progressivejpeg.html b/example/example-progressivejpeg.html new file mode 100644 index 0000000..d7393de --- /dev/null +++ b/example/example-progressivejpeg.html @@ -0,0 +1,42 @@ + + + + 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 d6424449ced0e33af1c2b89e35ed40e2c00a29d1 Mon Sep 17 00:00:00 2001 From: Nathan Grebowiec Date: Fri, 19 Sep 2014 06:50:41 -0500 Subject: [PATCH 2/2] use querySelectorAll() in all cases MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit since we aren’t using the HTML LiveCollection returned by getElementsByTagName() there is no reason to not just use querySelectorAll() in all cases. --- comcastify.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/comcastify.js b/comcastify.js index 20c46a2..753850b 100644 --- a/comcastify.js +++ b/comcastify.js @@ -72,6 +72,7 @@ var comcastifyjs = (function () { return function () { var params = { + elements: args.elements || document.querySelectorAll('img:not([class="progressiveJPEGemulator"])'), // elements affected 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 @@ -81,14 +82,6 @@ var comcastifyjs = (function () { progressiveJPEG: args.progressiveJPEG || false // enable progressive JPEG emulation }; - // generate a list of effected elements based on progressiveJPEG argument - if (params.progressiveJPEG) { - // this branch doesn't generate a live HTMLCollection, so images added after page load will not automatically load at Comcast speeds - params.elements = args.elements || document.querySelectorAll('img:not([class="progessiveJPEGemulator"])'); - } else { - params.elements = args.elements || document.getElementsByTagName('img'); - } - // make 'em load slow for(var i = 0; i < params.elements.length; i++) { // get some things we need