diff --git a/README.md b/README.md
index da5a96d..e53fe58 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
* **loadIncrement** : Number of pixels to load each time the loadSpeed timer ticks.
* **randLoadIncrement**: Set to true to make load increment random, loadIncrement ignored in this case.
* **randomPause** : Probability of skipping a pass each time the loadSpeed timer ticks. (0 to 1)
+ * **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 89980a8..832cbba 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';
@@ -15,16 +16,41 @@ var comcastifyjs = (function () {
// update slowload div
slowloadDiv.style.clip = 'rect(' + newTopClip + 'px auto auto auto)';
+ }
+
+ // check stopping conditions
+ 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 maxImageHeight = img.height * args.loadMaxPercent;
+ 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,13 +72,15 @@ var comcastifyjs = (function () {
return function () {
var params = {
- elements: args.elements || document.getElementsByTagName('img'), // elements affected
+ // elements affected
+ elements: args.elements || document.querySelectorAll('img:not([class="progressiveJPEGemulator"])'),
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
};
// make 'em load slow
@@ -78,6 +106,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!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+