imagesloaded.js

/*!
 * imagesLoaded PACKAGED v4.1.4
 * JavaScript is all like "You images are done yet or what?"
 * MIT License
 */

!function (e, t) { "function" == typeof define && define.amd ? define("ev-emitter/ev-emitter", t) : "object" == typeof module && module.exports ? module.exports = t() : e.EvEmitter = t() }("undefined" != typeof window ? window : this, function () { function e() { } var t = e.prototype; return t.on = function (e, t) { if (e && t) { var i = this._events = this._events || {}, n = i[e] = i[e] || []; return n.indexOf(t) == -1 && n.push(t), this } }, t.once = function (e, t) { if (e && t) { this.on(e, t); var i = this._onceEvents = this._onceEvents || {}, n = i[e] = i[e] || {}; return n[t] = !0, this } }, t.off = function (e, t) { var i = this._events && this._events[e]; if (i && i.length) { var n = i.indexOf(t); return n != -1 && i.splice(n, 1), this } }, t.emitEvent = function (e, t) { var i = this._events && this._events[e]; if (i && i.length) { i = i.slice(0), t = t || []; for (var n = this._onceEvents && this._onceEvents[e], o = 0; o < i.length; o++) { var r = i[o], s = n && n[r]; s && (this.off(e, r), delete n[r]), r.apply(this, t) } return this } }, t.allOff = function () { delete this._events, delete this._onceEvents }, e }), function (e, t) { "use strict"; "function" == typeof define && define.amd ? define(["ev-emitter/ev-emitter"], function (i) { return t(e, i) }) : "object" == typeof module && module.exports ? module.exports = t(e, require("ev-emitter")) : e.imagesLoaded = t(e, e.EvEmitter) }("undefined" != typeof window ? window : this, function (e, t) { function i(e, t) { for (var i in t) e[i] = t[i]; return e } function n(e) { if (Array.isArray(e)) return e; var t = "object" == typeof e && "number" == typeof e.length; return t ? d.call(e) : [e] } function o(e, t, r) { if (!(this instanceof o)) return new o(e, t, r); var s = e; return "string" == typeof e && (s = document.querySelectorAll(e)), s ? (this.elements = n(s), this.options = i({}, this.options), "function" == typeof t ? r = t : i(this.options, t), r && this.on("always", r), this.getImages(), h && (this.jqDeferred = new h.Deferred), void setTimeout(this.check.bind(this))) : void a.error("Bad element for imagesLoaded " + (s || e)) } function r(e) { this.img = e } function s(e, t) { this.url = e, this.element = t, this.img = new Image } var h = e.jQuery, a = e.console, d = Array.prototype.slice; o.prototype = Object.create(t.prototype), o.prototype.options = {}, o.prototype.getImages = function () { this.images = [], this.elements.forEach(this.addElementImages, this) }, o.prototype.addElementImages = function (e) { "IMG" == e.nodeName && this.addImage(e), this.options.background === !0 && this.addElementBackgroundImages(e); var t = e.nodeType; if (t && u[t]) { for (var i = e.querySelectorAll("img"), n = 0; n < i.length; n++) { var o = i[n]; this.addImage(o) } if ("string" == typeof this.options.background) { var r = e.querySelectorAll(this.options.background); for (n = 0; n < r.length; n++) { var s = r[n]; this.addElementBackgroundImages(s) } } } }; var u = { 1: !0, 9: !0, 11: !0 }; return o.prototype.addElementBackgroundImages = function (e) { var t = getComputedStyle(e); if (t) for (var i = /url\((['"])?(.*?)\1\)/gi, n = i.exec(t.backgroundImage); null !== n;) { var o = n && n[2]; o && this.addBackground(o, e), n = i.exec(t.backgroundImage) } }, o.prototype.addImage = function (e) { var t = new r(e); this.images.push(t) }, o.prototype.addBackground = function (e, t) { var i = new s(e, t); this.images.push(i) }, o.prototype.check = function () { function e(e, i, n) { setTimeout(function () { t.progress(e, i, n) }) } var t = this; return this.progressedCount = 0, this.hasAnyBroken = !1, this.images.length ? void this.images.forEach(function (t) { t.once("progress", e), t.check() }) : void this.complete() }, o.prototype.progress = function (e, t, i) { this.progressedCount++ , this.hasAnyBroken = this.hasAnyBroken || !e.isLoaded, this.emitEvent("progress", [this, e, t]), this.jqDeferred && this.jqDeferred.notify && this.jqDeferred.notify(this, e), this.progressedCount == this.images.length && this.complete(), this.options.debug && a && a.log("progress: " + i, e, t) }, o.prototype.complete = function () { var e = this.hasAnyBroken ? "fail" : "done"; if (this.isComplete = !0, this.emitEvent(e, [this]), this.emitEvent("always", [this]), this.jqDeferred) { var t = this.hasAnyBroken ? "reject" : "resolve"; this.jqDeferred[t](this) } }, r.prototype = Object.create(t.prototype), r.prototype.check = function () { var e = this.getIsImageComplete(); return e ? void this.confirm(0 !== this.img.naturalWidth, "naturalWidth") : (this.proxyImage = new Image, this.proxyImage.addEventListener("load", this), this.proxyImage.addEventListener("error", this), this.img.addEventListener("load", this), this.img.addEventListener("error", this), void (this.proxyImage.src = this.img.src)) }, r.prototype.getIsImageComplete = function () { return this.img.complete && this.img.naturalWidth }, r.prototype.confirm = function (e, t) { this.isLoaded = e, this.emitEvent("progress", [this, this.img, t]) }, r.prototype.handleEvent = function (e) { var t = "on" + e.type; this[t] && this[t](e) }, r.prototype.onload = function () { this.confirm(!0, "onload"), this.unbindEvents() }, r.prototype.onerror = function () { this.confirm(!1, "onerror"), this.unbindEvents() }, r.prototype.unbindEvents = function () { this.proxyImage.removeEventListener("load", this), this.proxyImage.removeEventListener("error", this), this.img.removeEventListener("load", this), this.img.removeEventListener("error", this) }, s.prototype = Object.create(r.prototype), s.prototype.check = function () { this.img.addEventListener("load", this), this.img.addEventListener("error", this), this.img.src = this.url; var e = this.getIsImageComplete(); e && (this.confirm(0 !== this.img.naturalWidth, "naturalWidth"), this.unbindEvents()) }, s.prototype.unbindEvents = function () { this.img.removeEventListener("load", this), this.img.removeEventListener("error", this) }, s.prototype.confirm = function (e, t) { this.isLoaded = e, this.emitEvent("progress", [this, this.element, t]) }, o.makeJQueryPlugin = function (t) { t = t || e.jQuery, t && (h = t, h.fn.imagesLoaded = function (e, t) { var i = new o(this, e, t); return i.jqDeferred.promise(h(this)) }) }, o.makeJQueryPlugin(), o });

lazyload.js

//lazyloading
function lazyloading() {
	$('img').each(function () {
		var vT = $(this);
        if (vT.data('src') !== undefined) {
            //console.log(vT.data('src') + '/' + vT.prop('width'));
            if ((vT.css('float') == 'left') || vT.css('float') == 'right') {
                vT.css({ 'min-width': '0' });
            }else if (vT.css('width') !== 0) {
                vT.css({ 'min-width': vT.css('width') });
            } else if (vT.css('height') !== 0) {
                vT.css({ 'height': vT.css('height') });
            }


            vT.addClass('lazyload').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
			var newsize = getClosestBigger(vT, is_high_resolution_screen());
			vT.attr('data-closestbigger', newsize);
			vT.attr('data-highres', is_high_resolution_screen());
            var vImgSrc = vT.data('src').replace(/preset=(\w+)/g, 'size=' + newsize + '&quality=85');
            vT.attr('src', vT.data('src').replace(/preset=(\w+)/g, 'preset=micro'));
			vT.attr('data-src', vImgSrc);
			vT.on('inview', function (event, isInView, visiblePartX, visiblePartY) {
                if (isInView) {
                    vT.attr('src', vImgSrc);
                    vT.parent().imagesLoaded().done(function (instance) {
                        vT.addClass('lazyloaded');
                    });
				}
			});
		}

	});
}

var responsiveSteps = "50=micro,100=mini,480=small,768=medium,960=large,1600=jumbo";
var rPreset = '50';
var rSize = 'micro';
var memWidth = $(document).width();

function getClosestBigger(el, highres) {
	//console.log(el.attr('class') + ' / ' + el.parent().width());
	var vW = ''
	if (el.closest('div').length) {
		vW = el.closest('div').width();
	} else {
		vW = el.parent().width();
	}
	if ($(document).width() < 769) { vW = $(document).width() }
	var vArr = responsiveSteps.split(',');
	var tmpSize = rSize;
	var vArr2 = '';
	var maxWidth = vArr[vArr.length - 1].split('=');
	var maxPreset = maxWidth[1];
	var nextbreak = false;
	if (highres) {
		vW = vW * 2;
	}
	
	maxWidth = maxWidth[0];
	if (vW > maxWidth) {
		rSize = maxWidth;
		rPreset = maxPreset;
	} else {
		for (var i = 0; i < vArr.length; i++) {
			vArr2 = vArr[i].split('=');
			//console.log(vArr2[0]);
			if (vW < (vArr2[0])) {
				rSize = vArr2[0];
				//console.log(rSize);
				rPreset = vArr2[1];
				break;
				//if ((nextbreak === false) && (vW >= 399)) {
				//	nextbreak = true;
				//} else {
				//	break;
				//}
			}
		}
	}
	return rSize;
}

//detect high resolution / retina screen
function is_high_resolution_screen() {
	return window.devicePixelRatio > 1;
}

lazyload.less

.lazyload {
  opacity: 0.1;
  .transition(all 0.5s ease-in-out);
  min-width:100%;
  &.lazyloaded {
    opacity: 1;
    min-width:0;
  }
}

onscreen.js

// jquery.onscreen 2018-01-22 https://github.com/adaptlearning/jquery.onscreen
"use strict"; !function () { function e(e) { for (var t = 0, n = e.length; t < n; t++) { var i = e[t].toLowerCase(); this[i] = new Number(t), this[i].string = i } } var t = { index: 0, check: function (e) { e[$.expando] || (e[$.expando] = ++t.index) }, make: function (e, n) { return t.check(e), n.guid + "-" + e[$.expando] } }, n = { TYPE: new e(["onscreen", "inview"]), INVIEW_STATES: new e(["none", "top", "bottom", "left", "right", "both"]), registered: [], shouldReProcess: !0, register: function (e, i, o) { var s = r.isLocked(), c = $(e); n.registered.push({ id: t.make(e, i), data: i, $element: c, type: o, _onscreen: s ? null : a.get(c).uniqueMeasurementId, _hasTriggered: !1 }), n.shouldReProcess = !0 }, unregister: function (e, i, r) { for (var o = n.registered, s = t.make(e, i), a = o.length - 1; a > -1; a--) { var c = o[a]; c.id == s && c.type == r && (o.splice(a, 1), n.shouldReProcess = !0) } }, process: function () { var e, t = n.registered; for (n.shouldReProcess = !0; n.shouldReProcess;) { if (n.shouldReProcess = !1, 0 == (e = t.length)) return; for (var i = 0; i < e; i++) { var r = t[i], o = a.get(r.$element); if (void 0 !== r._onscreen && r._hasTriggered) if (!(r._onscreen != o.uniqueMeasurementId)) continue; switch (r._onscreen = o.uniqueMeasurementId, r._hasTriggered = !0, r.type) { case n.TYPE.onscreen: n.processOnScreen(r, o); break; case n.TYPE.inview: n.processInView(r, o) }if (n.shouldReProcess) break } } }, processOnScreen: function (e, t) { e.$element.trigger("onscreen", t) }, processInView: function (e, t) { var i, r, o = t.percentFromTop >= 0 && t.percentFromTop <= 100, s = t.percentFromBottom >= 0 && t.percentFromBottom <= 100, a = t.percentFromLeft >= 0 && t.percentFromLeft <= 100, c = t.percentFromRight >= 0 && t.percentFromRight <= 100; i = o && s ? n.INVIEW_STATES.both.string : o ? n.INVIEW_STATES.top.string : s ? n.INVIEW_STATES.bottom.string : n.INVIEW_STATES.none.string, r = a && c ? n.INVIEW_STATES.both.string : a ? n.INVIEW_STATES.left.string : c ? n.INVIEW_STATES.right.string : n.INVIEW_STATES.none.string; var u = [t.onscreen, r, i]; e._inviewPreviousState = u, e._measurePreviousState = t, e.$element.trigger("inview", u) } }, i = { lastStartEvent: 0, timeoutHandle: null, intervalDuration: 100, hasRaf: !1, start: function () { i.lastStartEvent = (new Date).getTime(), i.repeat() }, repeat: function () { i.stop(), i.hasRaf ? i.timeoutHandle = requestAnimationFrame(i.main) : i.timeoutHandle = setTimeout(i.main, i.intervalDuration) }, hasExpired: function () { if (!((new Date).getTime() - i.lastStartEvent < 1500)) return i.stop(), !0 }, isThrottled: function () { return !((new Date).getTime() - i.lastMain > i.intervalDuration) }, lastMain: (new Date).getTime(), main: function () { i.isThrottled() ? i.repeat() : (i.lastMain = (new Date).getTime(), i.hasExpired() || (0 == n.registered.length ? (i.stop(), i.intervalDuration = 200, i.repeat()) : (i.stop(), i.intervalDuration = 100, i.repeat()), r.isLocked() || n.process())) }, stop: function () { null !== i.timeoutHandle && (i.hasRaf ? (cancelAnimationFrame(i.timeoutHandle), i.timeoutHandle = null) : (clearTimeout(i.timeoutHandle), i.timeoutHandle = null)) } }; $.extend($.event.special, { onscreen: { noBubble: !0, add: function (e) { n.register(this, e, n.TYPE.onscreen) }, remove: function (e) { n.unregister(this, e, n.TYPE.onscreen) } }, inview: { noBubble: !0, add: function (e) { n.register(this, e, n.TYPE.inview) }, remove: function (e) { n.unregister(this, e, n.TYPE.inview) } } }), $.extend($.fn, { onscreen: function (e) { return e ? (this.on("onscreen", e), this) : a.get(this) }, inview: function (e) { return e ? (this.on("inview", e), this) : a.get(this) } }); var r = { locks: [], lock: function (e) { r.isLocked(e) || r.locks.push(e) }, unlock: function (e) { if (r.isLocked(e)) { for (var t = 0, n = r.locks.length; t < n; t++) { if (r.locks[t] == e) { r.locks.splice(t, 1); break } } i.start() } }, isLocked: function (e) { if (!e) return r.locks.length > 0; for (var t = 0, n = r.locks.length; t < n; t++) { if (r.locks[t] == e) return !0 } return !1 } }, o = { options: {}, config: function (e) { "object" == typeof e && $.extend(o.options, e) } }; $.inview = $.onscreen = function () { i.start() }, $.extend($.inview, r, o); var s = { $el: $(window), height: null, width: null, heightRatio: null, widthRatio: null, resize: function () { s.height = window.innerHeight || s.$el.height(), s.width = window.innerWidth || s.$el.width(), s.heightRatio = 100 / s.height, s.widthRatio = 100 / s.width, i.start() } }, a = { featureDetect: function () { i.hasRaf = window.requestAnimationFrame && window.cancelAnimationFrame }, get: function (e) { if (0 != e.length) { var t, n = e[0]; try { t = n.getBoundingClientRect() } catch (e) { t = { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 } } var i = t.height, r = t.width, o = t.top, c = t.left, u = s.height - (o + i), l = s.width - (c + r), h = Math.round(s.heightRatio * o), d = Math.round(s.widthRatio * c), g = Math.round(s.heightRatio * u), f = Math.round(s.widthRatio * l), m = null; m = c + r > 0 && l < 0 && c < 0 ? r : c < 0 ? r + c : c + r > s.width ? s.width - c : r; var p = null; (p = o + i > 0 && u < 0 && o < 0 ? i : o < 0 ? i + o : o + i > s.height ? s.height - o : i) < 0 && (p = 0), m < 0 && (m = 0); var v = Math.round(100 / i * p), w = Math.round(100 / r * m), T = i * r, E = p * m, I = Math.round(100 / T * E), k = !0; (f > 100 || d > 100 || g > 100 || h > 100) && (k = !1), i <= 0 && r <= 0 && (k = !1); var S = a.isElementHidden(n); if (S && (k = !1), k) for (var $ = a.getParents(n), R = 0, b = $.length - 1; R < b; R++) { var P = $[R]; if (S = a.isElementHidden(P)) { k = !1; break } if (a.isOutOfBounds(n, P)) { k = !1; break } } return { top: o, left: c, bottom: u, right: l, percentFromTop: h, percentFromLeft: d, percentFromBottom: g, percentFromRight: f, percentInview: I, percentInviewHorizontal: w, percentInviewVertical: v, onscreen: k, uniqueMeasurementId: "" + o + c + u + l + i + r + s.height + s.width + k, timestamp: (new Date).getTime() } } }, getParents: function (e) { for (var t, n = []; t = e.parentElement;)n.push(t), e = t; return n }, isElementHidden: function (e) { var t = "none" == e.style.display || "hidden" == e.style.visibility; if (t) return !0; var n = window.getComputedStyle(e, null); return t = "none" == n.display || "hidden" == n.visibility }, isOutOfBounds: function (e, t) { var n = t.clientWidth < t.scrollWidth, i = t.clientHeight < t.scrollHeight, r = n || i, o = $(t); if (!r || "visible" === o.css("overflow")) return !1; var s = $(e).offset(), a = o.offset(), c = s.top - a.top, u = s.left - a.left, l = c + e.clientHeight, h = u + e.clientWidth; return c >= t.clientHeight || u >= t.clientWidth || l <= 0 || h <= 0 } }; $(window).on({ "touchmove scroll mousedown keydown": i.start, resize: s.resize }), $(a.featureDetect), s.resize() }();