Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Prime (progressive/responsive image enabler) is a JavaScript script I wrote, that allows for progressive and responsive image loading, potentially saving over 80% of a page's size and speed. See: http://www.hnldesign.nl/work/code/prime/
/*!
* PRIME - Progressive-Responsive Image Enabler - v2.1.14 - 07/07/2017
* http://code.hnldesign.nl/demo/hnl.prime.html
*
* Copyright (c) 2014-2016 HN Leussink
* Dual licensed under the MIT and GPL licenses.
*
* Example: http://code.hnldesign.nl/demo/hnl.prime.html
*
* Feature notes:
*
* - Binding to events can be done either by binding to the document:
* document.addEventListener('ProcessAll.Prime', function (e) { console.log(e); }, false);
* .. or to a specific element:
* document.getElementById('prime-img-13').addEventListener('Loading.Prime', function (e) { console.log(e); }, false);
*
* - Force an element to update (even if not in view):
* document.getElementById('prime-img-3').Prime.set('BestImage', {force:true});
*/
/*jslint bitwise: true */
/*global console*/
/**
* DocReady - When the Doc is.. well.. ready
* Usage: docReady(function() { doStuff(); });
*/
if (typeof 'docReady' !== 'function') {
(function (funcName, baseObj) {
'use strict';
funcName = funcName || 'docReady';
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
function ready() {
if (!readyFired) {
var i;
readyFired = true;
for (i = 0; i < readyList.length; i += 1) {
readyList[i].fn.call(window, readyList[i].ctx);
}
readyList = [];
}
}
function readyStateChange() {
if (document.readyState === 'complete') {
ready();
}
}
baseObj[funcName] = function (callback, context) {
if (readyFired) {
setTimeout(function () {
callback(context);
}, 1);
return;
}
if (!readyFired) {
readyList.push({fn: callback, ctx: context});
}
if (document.readyState === 'complete') {
setTimeout(ready, 1);
} else {
if (!readyEventHandlersInstalled) {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', ready, false);
window.addEventListener('load', ready, false);
} else {
document.attachEvent('onreadystatechange', readyStateChange);
window.attachEvent('onload', ready);
}
readyEventHandlersInstalled = true;
}
}
};
}('docReady', window));
}
/**
* JavaScript function prototype debouncer 1.0 - hnldesign.nl
* Based on code by Paul Irish and the original debouncing function from John Hann
* http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
* Register debouncer as a function prototype.
* Usage:
* myfunction.debounce(time, executeasap, caller);
*
* @param threshold - Integer. Time in ms to wait for repeated calls. If time passes without more requests, function is called
* @param execAsap - Boolean. Reverses workings; call function on first request, stop subsequent calls within threshold
* @param caller - String. Original event that requested the repeat, for usage in callback
* @returns function {debounced}
*/
if (typeof Function.prototype.deBounce !== 'function') {
Object.defineProperty(Function.prototype, 'deBounce', {
value: function (threshold, execAsap, caller) {
'use strict';
var func = this;
var timeout;
return function debounced() {
var obj = this;
function delayed() {
if (!execAsap) {
func.apply(obj, [caller]);
}
timeout = null;
}
if (timeout) {
clearTimeout(timeout);
} else {
if (execAsap) {
func.apply(obj, [caller]);
}
}
timeout = setTimeout(delayed, threshold || 100);
};
}
});
}
var PrimeBase = {
Class: 'prime-img',
BrPnts: [80, 160, 320, 480, 768, 1024, 1224, 1824, 1920],
DpiMP: window.hasOwnProperty('devicePixelRatio') ? ((window.devicePixelRatio >= 1.5) ? 2 : 1) : 1,
Hq: 90,
Timeout: 15000,
MaxWidth: 3840, //1920 x 2
RemOr: true, //remove (opacity 0) original after transition?
Callback: null,
Nodes: [],
Browser: {
WinWidth: window.innerWidth,
currentWinWidth: function () {
'use strict';
return window.innerWidth;
},
supportsEvtLstnr: typeof window.addEventListener === 'function',
supportsElsByCln: document.getElementsByClassName !== undefined,
supportsRect: (typeof document.documentElement.getBoundingClientRect === 'function'),
isCrap: document.querySelectorAll === undefined
},
Status: {
total: 0,
toProcess: 0,
processed: 0,
event: null,
working: false
},
Helpers: {
NormalizeDimensions: function (th) {
'use strict';
var x, actualDims = th.get('ActualDimensions'), sourceWidth = th.get('SourceWidth'), ratio = th.get('Ratio'), cropped = th.get('Crop') === 1;
sourceWidth = (sourceWidth > PrimeBase.MaxWidth) ? PrimeBase.MaxWidth : sourceWidth; //cap
actualDims.width = (actualDims.width > PrimeBase.MaxWidth) ? PrimeBase.MaxWidth : actualDims.width; //cap
if (th.breakPoints === undefined) {
th.breakPoints = [];
//get breakpoints if not already set for node
if (sourceWidth === 0 || sourceWidth === undefined) {
sourceWidth = PrimeBase.BrPnts[PrimeBase.BrPnts.length - 1];
}
for (x = 0; x < PrimeBase.BrPnts.length - 1; x += 1) {
if (PrimeBase.BrPnts[x] <= sourceWidth) { //add all breakpoints that do not exceed the source's width
th.breakPoints.push(PrimeBase.BrPnts[x]);
}
}
if ((th.breakPoints.indexOf(sourceWidth) === -1)) { //add the source width as a final breakpoint
th.breakPoints = th.breakPoints.concat([sourceWidth]);
}
}
for (x = 0; x < th.breakPoints.length - 1; x += 1) {
if (((actualDims.width * PrimeBase.DpiMP) <= th.breakPoints[x]) && (th.breakPoints[x] * ratio >= (actualDims.height * PrimeBase.DpiMP))) {
break;
}
}
return {width: th.breakPoints[x], height: (!!cropped) ? Math.round(th.breakPoints[x] * ratio) : 0};
},
EventNotice: function (node, event, eventData) {
'use strict';
var evt;
event = event + '.Prime';
if (document.createEventObject) { // dispatch for IE
evt = document.createEventObject();
evt.details = eventData;
return node.fireEvent(event, evt);
}
if (!document.createEventObject) { // dispatch for firefox + others
evt = document.createEvent('HTMLEvents');
evt.initEvent(event, true, true); // event type,bubbling,cancelable
evt.details = eventData;
return !node.dispatchEvent(evt);
}
},
SetStartVars: function (event, callback) {
'use strict';
PrimeBase.Status.working = true;
PrimeBase.Status.total = PrimeBase.Nodes.length;
PrimeBase.Status.event = event;
PrimeBase.Status.processed = 0;
PrimeBase.Callback = (typeof callback === 'function') ? callback : null;
}
},
ProcessAll: function (event, callback) {
'use strict';
if (event === 'resizeEvent') { //check if width has changed on resize event (no width change means no image width change, at least; that is the presumption)
if (PrimeBase.Browser.currentWinWidth() !== PrimeBase.Browser.WinWidth) {
PrimeBase.Browser.WinWidth = PrimeBase.Browser.currentWinWidth();
} else {
return;
}
}
var i;
PrimeBase.Helpers.EventNotice(document, 'ProcessAll', PrimeBase.Status);
PrimeBase.Helpers.SetStartVars(event, callback);
for (i = 0; i < PrimeBase.Status.total; i += 1) {
PrimeBase.Status.toProcess += PrimeBase.Nodes[i].Prime.set('BestImage') ? 1 : 0;
PrimeBase.Helpers.EventNotice(PrimeBase.Nodes[i], 'ProcessNode', PrimeBase.Nodes[i].Prime);
}
if (PrimeBase.Status.toProcess === 0) {
PrimeBase.Status.working = false;
PrimeBase.Helpers.EventNotice(document, 'NothingToProcess', PrimeBase.Status);
}
}
};
var PrimeClass = (function () {
/*jshint validthis: true */
'use strict';
/* ----------------------------- Constructor ----------------------------- */
function constructor(node, name) {
this.node = node;
this.name = name;
this.urlCache = {};
this.timer = null;
this.dims = {
width: this.get('ActualDimensions').width,
height: this.get('ActualDimensions').height
};
this.options = {
process: node.getAttribute('data-prprocess') || 'auto',
classes: node.className || '',
transition: node.style.transition !== ''
};
//set up mule
this.mule = new Image();
this.mule.PrimeErrorReason = '404'; //default error reason
//set up events for mule
if (PrimeBase.Browser.supportsEvtLstnr) {
this.mule.addEventListener('load', function () {
node.Prime.event('Loaded', {src: this.src});
}, false);
this.mule.addEventListener('error', function (e) {
node.Prime.event('LoadError', {event: e, reason: this.PrimeErrorReason});
}, false);
} else {
this.mule.attachEvent('onload', function () {
node.Prime.event('Loaded', {src: this.src});
});
this.mule.attachEvent('onerror', function (e) {
node.Prime.event('LoadError', {event: e, reason: this.PrimeErrorReason});
});
}
}
/* ----------------------------- Apply constructor ----------------------------- */
var Prime = function () {
return constructor.apply(this, arguments);
};
var proto = Prime.prototype;
/* ----------------------------- GET methods ----------------------------- */
proto.get = function (what, args) {
switch (what) {
case 'SourceWidth':
return parseInt(this.node.getAttribute('data-srcwidth'), 10) || window.innerWidth || PrimeBase.BrPnts[PrimeBase.BrPnts.length - 1];
case 'Ratio':
return parseFloat(this.node.getAttribute('data-ratio')) || 0.6180339887498547; //golden ratio
case 'Path':
var withFileName = (args !== undefined) ? args.withFileName : false;
return withFileName ?
(this.node.getAttribute('data-path') || '') :
(this.node.getAttribute('data-path').substring(0, this.node.getAttribute('data-path').lastIndexOf('/') + 1) || '');
case 'FileName':
return this.get('Path', {withFileName: true}).substring(this.get('Path', {withFileName: true}).lastIndexOf('/') + 1);
case 'Crop':
return parseInt(this.node.getAttribute('data-crop'), 10);
case 'CropArea':
return this.node.getAttribute('data-croparea') || '';
case 'Quality':
return parseFloat(this.node.getAttribute('data-quality') || PrimeBase.Hq);
case 'Display':
return this.node.currentStyle ? this.node.currentStyle.display : window.getComputedStyle(this.node, null).display;
case 'Initial':
return document.getElementById(this.node.id + '_initial');
case 'Filters':
return this.node.getAttribute('data-filters') || 0;
case 'Caching':
return parseInt(this.node.getAttribute('data-caching'), 10) === 1;
case 'ActualDimensions':
var display = this.get('Display') !== 'none', dimensions = {}, old;
if (!display) {
old = {
visibility: this.node.style.visibility,
display: this.node.style.display
};
this.node.style.visibility = 'hidden';
this.node.style.display = 'block';
}
if (PrimeBase.Browser.supportsRect) {
var rect = this.node.getBoundingClientRect();
dimensions = {
width: Math.floor(rect.width),
height: Math.floor(rect.height)
};
} else {
dimensions = {
width: Math.floor(this.node.offsetWidth || window.getComputedStyle(this.node).width),
height: Math.floor(this.node.offsetHeight || window.getComputedStyle(this.node).height)
};
}
if (!display) {
this.node.style.visibility = old.visibility;
this.node.style.display = old.display;
}
return dimensions;
case 'uid':
return Math.abs((this.get('Path', {withFileName: true}) + this.dims.width).split('').reduce(function (a, b) {
a = ((a << 5) - a) + b.charCodeAt(0);
return a & a;
}, 0));
case 'NormDimensions':
var dims = PrimeBase.Helpers.NormalizeDimensions(this);
if ((dims.height !== this.dims.height || dims.width !== this.dims.width)) {
this.dims = dims;
}
return this.dims;
case 'NewUrl':
var norm = this.get('NormDimensions'), cached = false, url, uid = this.get('uid');
if (this.urlCache[uid]) {
cached = true;
url = this.urlCache[uid];
} else {
url = this.get('Path') +
'resized/' +
norm.width + '/' +
norm.height + '/' +
this.get('Quality') + '/' +
this.get('Crop') + '/' +
this.get('Filters') + '/' +
this.get('CropArea') + '/' +
this.get('FileName') +
((!this.get('Caching')) ? '?' + Date.now() : '');
url = url.replace(/(https?:\/\/)|(\/)+/g, '$1$2');
}
return {url: url, cached: cached};
default:
return false;
}
};
/* ----------------------------- STATE methods ----------------------------- */
proto.is = function (what, args) {
switch (what) {
case 'Visible':
// Am I visible?
var ret = true; //true by default. For ancient browsers.
if (args.override !== 'always') {
if (PrimeBase.Browser.supportsRect && this.get('Display') !== 'none') {
var rect = this.node.getBoundingClientRect();
ret = (
(rect.height > 0 || rect.width > 0) &&
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
}
return ret;
case 'Phantomized':
var nxtSbl = this.node.nextSibling;
return nxtSbl && (nxtSbl.nodeType === 1) ? (nxtSbl.className.indexOf('prime-img-phantom') !== -1) : false;
default:
return false;
}
};
/* ----------------------------- SET methods ----------------------------- */
proto.set = function (what, args) {
var forced = (args !== undefined) ? args.force : false;
switch (what) {
case 'BestImage':
if (!this.is('Phantomized') && this.is('Visible', {override: this.options.process}) && !this.loading) {
var url = this.get('NewUrl', {force: forced}), mu = this.mule;
if ((mu.src !== url.url) || forced) {
PrimeBase.Helpers.EventNotice(this.node, (url.cached ? 'LoadingCached' : 'Loading'), this.node.Prime);
if (forced) {
PrimeBase.Status.toProcess = PrimeBase.Status.toProcess + 1;
}
PrimeBase.Status.processed = PrimeBase.Status.processed + 1;
this.node.Prime.loading = true;
this.node.className = this.options.classes + ' prime-img-loading';
mu.src = url.url;
//start a timer since this image has not yet been loaded (and thus cached)
this.timer = setTimeout(function () {
mu.src = ''; //cancels the load
mu.PrimeErrorReason = 'timeout'; //to be used in load error handler
}, PrimeBase.Timeout);
return true;
}
return false;
}
if (this.node.Prime.loading) {
PrimeBase.Helpers.EventNotice(document, 'Busy', this.node.Prime);
}
break;
default:
return false;
}
};
/* ----------------------------- EVENT methods ----------------------------- */
proto.event = function (what, args) {
switch (what) {
case 'Loaded':
PrimeBase.Helpers.EventNotice(this.node, 'Loaded', this.node.Prime);
PrimeBase.Status.toProcess = PrimeBase.Status.toProcess - 1;
if (this.timer) {
clearTimeout(this.timer);
}
//store as cached
this.urlCache[this.get('uid')] = this.mule.src;
var ext = this.mule.src.toLowerCase().substr(this.mule.src.toLowerCase().lastIndexOf('.') + 1),
initial = this.get('Initial');
if ((initial !== null && (parseInt(initial.style.opacity, 10) !== 0)) && (PrimeBase.RemOr || (ext === 'png' || ext === 'gif'))) {
//PNG/GIF; potentially transparent so initial image should always be removed (after transition)
if (this.options.transition) {
if (PrimeBase.Browser.supportsEvtLstnr) {
this.node.addEventListener('transitionend', function () {
initial.style.opacity = 0;
}, false);
} else {
this.node.attachEvent('ontransitionend', function () {
initial.style.opacity = 0;
});
}
} else {
initial.style.opacity = 0;
}
}
if (this.node.tagName === 'DIV') {
this.node.style.backgroundImage = 'url(\'' + this.mule.src + '\')';
} else {
this.node.src = this.mule.src;
}
if (this.options.transition) {
this.node.style.opacity = 1;
}
this.node.className = this.options.classes + ' prime-img-loaded' + (PrimeBase.BrPnts > 1 ? this.node.className + ' prime-img-retina' : '');
this.node.Prime.loading = false;
if (PrimeBase.Status.toProcess === 0) {
PrimeBase.Status.working = false;
PrimeBase.Helpers.EventNotice(document, 'AllLoaded', PrimeBase);
if (typeof PrimeBase.Callback === 'function') {
PrimeBase.Callback.call(this, args);
}
}
return true;
case 'LoadError':
PrimeBase.Status.toProcess = PrimeBase.Status.toProcess - 1;
if (this.timer) {
clearTimeout(this.timer);
}
PrimeBase.Helpers.EventNotice(this.node, 'Error', this.node.Prime);
return false;
default:
return false;
}
};
/* ----------------------------- Set class free ----------------------------- */
return Prime;
}());
docReady(function (e) {
'use strict';
var orientationEvent = window.hasOwnProperty('onorientationchange') ? 'orientationchange' : 'resize',
elements = PrimeBase.Browser.supportsElsByCln ? document.getElementsByClassName(PrimeBase.Class) : document.querySelectorAll('.' + PrimeBase.Class),
i,
nxtSbl;
if (PrimeBase.Browser.supportsEvtLstnr) {
window.addEventListener(orientationEvent, PrimeBase.ProcessAll.deBounce(100, false, 'resizeEvent'), false);
window.addEventListener('scroll', PrimeBase.ProcessAll.deBounce(50, false, 'scrollEvent'), false);
} else {
window.attachEvent('on' + orientationEvent, PrimeBase.ProcessAll.deBounce(100, false, 'resizeEvent'));
window.attachEvent('onscroll', PrimeBase.ProcessAll.deBounce(50, false, 'scrollEvent'));
}
for (i = 0; i < elements.length; i += 1) {
nxtSbl = elements[i].nextSibling;
if (nxtSbl !== null) {
if (nxtSbl && (nxtSbl.nodeType === 1) && (nxtSbl.className.indexOf('prime-img-phantom') === -1)) {
elements[i].Prime = new PrimeClass(elements[i], elements[i].id);
PrimeBase.Nodes.push(elements[i]);
PrimeBase.Helpers.EventNotice(elements[i], 'SetupNode', elements[i].Prime);
}
}
}
PrimeBase.Helpers.EventNotice(document, 'SetupDone', e);
//go
PrimeBase.ProcessAll('docReady');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment