├── .gitignore ├── LICENSE ├── README.md ├── composer.json ├── dist ├── wp-performant-media.css ├── wp-performant-media.js └── wp-performant-media.map ├── package.json ├── screenshot.png ├── src ├── wp-performant-media.js └── wp-performant-media.scss ├── wp-performant-media.php └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Tiny Pixel Collective 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | WP Performant Media 2 | 3 | [![Latest Stable Version](https://poser.pugx.org/tiny-pixel/wp-performant-media/v/stable)](https://packagist.org/packages/tiny-pixel/wp-performant-media) [![Total Downloads](https://poser.pugx.org/tiny-pixel/wp-performant-media/downloads)](https://packagist.org/packages/tiny-pixel/wp-performant-media) [![License](https://poser.pugx.org/tiny-pixel/wp-performant-media/license)](https://packagist.org/packages/tiny-pixel/wp-performant-media) 4 | 5 | Simple lazy-loading images with subtle CSS transitions and polyfill support. 6 | 7 | Free & Open Source Software from the labs at [Tiny Pixel](https://tinypixel.io). 8 | 9 | ### 🚀 10 | 11 | Install with composer or add to plugins directory. Enable. Profit! 12 | 13 | ### 🛠 📦 14 | 15 | - `yarn` 16 | - `yarn build` -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiny-pixel/wp-performant-media", 3 | "type": "wordpress-plugin", 4 | "description": "Simple lazy-loading images with subtle CSS transition and polyfill support.", 5 | "authors": [ 6 | { 7 | "name": "Kelly Mears", 8 | "email": "developers@tinypixel.io", 9 | "homepage": "https://tinypixel.io" 10 | } 11 | ], 12 | "license": "MIT", 13 | "homepage": "https://github.com/pixelcollective/wp-performant-media" 14 | } -------------------------------------------------------------------------------- /dist/wp-performant-media.css: -------------------------------------------------------------------------------- 1 | .lazy-load{opacity:0}.lazy-load.is-loaded{-webkit-animation:focus-in 1s cubic-bezier(.55,.085,.68,.53) both;animation:focus-in 1s cubic-bezier(.55,.085,.68,.53) both;opacity:1}@-webkit-keyframes focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}to{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}to{-webkit-filter:blur(0);filter:blur(0);opacity:1}} -------------------------------------------------------------------------------- /dist/wp-performant-media.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,n,t){var i="function"==typeof parcelRequire&&parcelRequire,o="function"==typeof require&&require;function u(n,t){if(!r[n]){if(!e[n]){var f="function"==typeof parcelRequire&&parcelRequire;if(!t&&f)return f(n,!0);if(i)return i(n,!0);if(o&&"string"==typeof n)return o(n);var c=new Error("Cannot find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[n][1][r]||r},p.cache={};var l=r[n]=new u.Module(n);e[n][0].call(l.exports,p,l,l.exports,this)}return r[n].exports;function p(e){return u(p.resolve(e))}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.exports={}},u.modules=e,u.cache=r,u.parent=i,u.register=function(r,n){e[r]=[function(e,r){r.exports=n},{}]};for(var f=0;f0}});else{var n=[];i.prototype.THROTTLE_TIMEOUT=100,i.prototype.POLL_INTERVAL=null,i.prototype.USE_MUTATION_OBSERVER=!0,i.prototype.observe=function(t){if(!this._observationTargets.some(function(e){return e.element==t})){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},i.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},i.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},i.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},i.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},i.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},i.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(r(t,"resize",this._checkForIntersections,!0),r(e,"scroll",this._checkForIntersections,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in t&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},i.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,s(t,"resize",this._checkForIntersections,!0),s(e,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},i.prototype._checkForIntersections=function(){var e=this._rootIsInDom(),n=e?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0};this._observationTargets.forEach(function(i){var r=i.element,s=h(r),c=this._rootContainsTarget(r),a=i.entry,u=e&&c&&this._computeTargetAndRootIntersection(r,n),l=i.entry=new o({time:t.performance&&performance.now&&performance.now(),target:r,boundingClientRect:s,rootBounds:n,intersectionRect:u});a?e&&c?this._hasCrossedThreshold(a,l)&&this._queuedEntries.push(l):a&&a.isIntersecting&&this._queuedEntries.push(l):this._queuedEntries.push(l)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},i.prototype._computeTargetAndRootIntersection=function(n,o){if("none"!=t.getComputedStyle(n).display){for(var i,r,s,c,u,l,p,d,f=h(n),g=a(n),_=!1;!_;){var v=null,m=1==g.nodeType?t.getComputedStyle(g):{};if("none"==m.display)return;if(g==this.root||g==e?(_=!0,v=o):g!=e.body&&g!=e.documentElement&&"visible"!=m.overflow&&(v=h(g)),v&&(i=v,r=f,s=void 0,c=void 0,u=void 0,l=void 0,p=void 0,d=void 0,s=Math.max(i.top,r.top),c=Math.min(i.bottom,r.bottom),u=Math.max(i.left,r.left),l=Math.min(i.right,r.right),d=c-s,!(f=(p=l-u)>=0&&d>=0&&{top:s,bottom:c,left:u,right:l,width:p,height:d})))break;g=a(g)}return f}},i.prototype._getRootRect=function(){var t;if(this.root)t=h(this.root);else{var n=e.documentElement,o=e.body;t={top:0,left:0,right:n.clientWidth||o.clientWidth,width:n.clientWidth||o.clientWidth,bottom:n.clientHeight||o.clientHeight,height:n.clientHeight||o.clientHeight}}return this._expandRectByRootMargin(t)},i.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100}),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},i.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i 0;\n }\n });\n }\n return;\n}\n\n\n/**\n * An IntersectionObserver registry. This registry exists to hold a strong\n * reference to IntersectionObserver instances currently observing a target\n * element. Without this registry, instances without another reference may be\n * garbage collected.\n */\nvar registry = [];\n\n\n/**\n * Creates the global IntersectionObserverEntry constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry\n * @param {Object} entry A dictionary of instance properties.\n * @constructor\n */\nfunction IntersectionObserverEntry(entry) {\n this.time = entry.time;\n this.target = entry.target;\n this.rootBounds = entry.rootBounds;\n this.boundingClientRect = entry.boundingClientRect;\n this.intersectionRect = entry.intersectionRect || getEmptyRect();\n this.isIntersecting = !!entry.intersectionRect;\n\n // Calculates the intersection ratio.\n var targetRect = this.boundingClientRect;\n var targetArea = targetRect.width * targetRect.height;\n var intersectionRect = this.intersectionRect;\n var intersectionArea = intersectionRect.width * intersectionRect.height;\n\n // Sets intersection ratio.\n if (targetArea) {\n // Round the intersection ratio to avoid floating point math issues:\n // https://github.com/w3c/IntersectionObserver/issues/324\n this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));\n } else {\n // If area is zero and is intersecting, sets to 1, otherwise to 0\n this.intersectionRatio = this.isIntersecting ? 1 : 0;\n }\n}\n\n\n/**\n * Creates the global IntersectionObserver constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface\n * @param {Function} callback The function to be invoked after intersection\n * changes have queued. The function is not invoked if the queue has\n * been emptied by calling the `takeRecords` method.\n * @param {Object=} opt_options Optional configuration options.\n * @constructor\n */\nfunction IntersectionObserver(callback, opt_options) {\n\n var options = opt_options || {};\n\n if (typeof callback != 'function') {\n throw new Error('callback must be a function');\n }\n\n if (options.root && options.root.nodeType != 1) {\n throw new Error('root must be an Element');\n }\n\n // Binds and throttles `this._checkForIntersections`.\n this._checkForIntersections = throttle(\n this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);\n\n // Private properties.\n this._callback = callback;\n this._observationTargets = [];\n this._queuedEntries = [];\n this._rootMarginValues = this._parseRootMargin(options.rootMargin);\n\n // Public properties.\n this.thresholds = this._initThresholds(options.threshold);\n this.root = options.root || null;\n this.rootMargin = this._rootMarginValues.map(function(margin) {\n return margin.value + margin.unit;\n }).join(' ');\n}\n\n\n/**\n * The minimum interval within which the document will be checked for\n * intersection changes.\n */\nIntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;\n\n\n/**\n * The frequency in which the polyfill polls for intersection changes.\n * this can be updated on a per instance basis and must be set prior to\n * calling `observe` on the first target.\n */\nIntersectionObserver.prototype.POLL_INTERVAL = null;\n\n/**\n * Use a mutation observer on the root element\n * to detect intersection changes.\n */\nIntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;\n\n\n/**\n * Starts observing a target element for intersection changes based on\n * the thresholds values.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.observe = function(target) {\n var isTargetAlreadyObserved = this._observationTargets.some(function(item) {\n return item.element == target;\n });\n\n if (isTargetAlreadyObserved) {\n return;\n }\n\n if (!(target && target.nodeType == 1)) {\n throw new Error('target must be an Element');\n }\n\n this._registerInstance();\n this._observationTargets.push({element: target, entry: null});\n this._monitorIntersections();\n this._checkForIntersections();\n};\n\n\n/**\n * Stops observing a target element for intersection changes.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.unobserve = function(target) {\n this._observationTargets =\n this._observationTargets.filter(function(item) {\n\n return item.element != target;\n });\n if (!this._observationTargets.length) {\n this._unmonitorIntersections();\n this._unregisterInstance();\n }\n};\n\n\n/**\n * Stops observing all target elements for intersection changes.\n */\nIntersectionObserver.prototype.disconnect = function() {\n this._observationTargets = [];\n this._unmonitorIntersections();\n this._unregisterInstance();\n};\n\n\n/**\n * Returns any queue entries that have not yet been reported to the\n * callback and clears the queue. This can be used in conjunction with the\n * callback to obtain the absolute most up-to-date intersection information.\n * @return {Array} The currently queued entries.\n */\nIntersectionObserver.prototype.takeRecords = function() {\n var records = this._queuedEntries.slice();\n this._queuedEntries = [];\n return records;\n};\n\n\n/**\n * Accepts the threshold value from the user configuration object and\n * returns a sorted array of unique threshold values. If a value is not\n * between 0 and 1 and error is thrown.\n * @private\n * @param {Array|number=} opt_threshold An optional threshold value or\n * a list of threshold values, defaulting to [0].\n * @return {Array} A sorted list of unique and valid threshold values.\n */\nIntersectionObserver.prototype._initThresholds = function(opt_threshold) {\n var threshold = opt_threshold || [0];\n if (!Array.isArray(threshold)) threshold = [threshold];\n\n return threshold.sort().filter(function(t, i, a) {\n if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {\n throw new Error('threshold must be a number between 0 and 1 inclusively');\n }\n return t !== a[i - 1];\n });\n};\n\n\n/**\n * Accepts the rootMargin value from the user configuration object\n * and returns an array of the four margin values as an object containing\n * the value and unit properties. If any of the values are not properly\n * formatted or use a unit other than px or %, and error is thrown.\n * @private\n * @param {string=} opt_rootMargin An optional rootMargin value,\n * defaulting to '0px'.\n * @return {Array} An array of margin objects with the keys\n * value and unit.\n */\nIntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {\n var marginString = opt_rootMargin || '0px';\n var margins = marginString.split(/\\s+/).map(function(margin) {\n var parts = /^(-?\\d*\\.?\\d+)(px|%)$/.exec(margin);\n if (!parts) {\n throw new Error('rootMargin must be specified in pixels or percent');\n }\n return {value: parseFloat(parts[1]), unit: parts[2]};\n });\n\n // Handles shorthand.\n margins[1] = margins[1] || margins[0];\n margins[2] = margins[2] || margins[0];\n margins[3] = margins[3] || margins[1];\n\n return margins;\n};\n\n\n/**\n * Starts polling for intersection changes if the polling is not already\n * happening, and if the page's visibility state is visible.\n * @private\n */\nIntersectionObserver.prototype._monitorIntersections = function() {\n if (!this._monitoringIntersections) {\n this._monitoringIntersections = true;\n\n // If a poll interval is set, use polling instead of listening to\n // resize and scroll events or DOM mutations.\n if (this.POLL_INTERVAL) {\n this._monitoringInterval = setInterval(\n this._checkForIntersections, this.POLL_INTERVAL);\n }\n else {\n addEvent(window, 'resize', this._checkForIntersections, true);\n addEvent(document, 'scroll', this._checkForIntersections, true);\n\n if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {\n this._domObserver = new MutationObserver(this._checkForIntersections);\n this._domObserver.observe(document, {\n attributes: true,\n childList: true,\n characterData: true,\n subtree: true\n });\n }\n }\n }\n};\n\n\n/**\n * Stops polling for intersection changes.\n * @private\n */\nIntersectionObserver.prototype._unmonitorIntersections = function() {\n if (this._monitoringIntersections) {\n this._monitoringIntersections = false;\n\n clearInterval(this._monitoringInterval);\n this._monitoringInterval = null;\n\n removeEvent(window, 'resize', this._checkForIntersections, true);\n removeEvent(document, 'scroll', this._checkForIntersections, true);\n\n if (this._domObserver) {\n this._domObserver.disconnect();\n this._domObserver = null;\n }\n }\n};\n\n\n/**\n * Scans each observation target for intersection changes and adds them\n * to the internal entries queue. If new entries are found, it\n * schedules the callback to be invoked.\n * @private\n */\nIntersectionObserver.prototype._checkForIntersections = function() {\n var rootIsInDom = this._rootIsInDom();\n var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();\n\n this._observationTargets.forEach(function(item) {\n var target = item.element;\n var targetRect = getBoundingClientRect(target);\n var rootContainsTarget = this._rootContainsTarget(target);\n var oldEntry = item.entry;\n var intersectionRect = rootIsInDom && rootContainsTarget &&\n this._computeTargetAndRootIntersection(target, rootRect);\n\n var newEntry = item.entry = new IntersectionObserverEntry({\n time: now(),\n target: target,\n boundingClientRect: targetRect,\n rootBounds: rootRect,\n intersectionRect: intersectionRect\n });\n\n if (!oldEntry) {\n this._queuedEntries.push(newEntry);\n } else if (rootIsInDom && rootContainsTarget) {\n // If the new entry intersection ratio has crossed any of the\n // thresholds, add a new entry.\n if (this._hasCrossedThreshold(oldEntry, newEntry)) {\n this._queuedEntries.push(newEntry);\n }\n } else {\n // If the root is not in the DOM or target is not contained within\n // root but the previous entry for this target had an intersection,\n // add a new record indicating removal.\n if (oldEntry && oldEntry.isIntersecting) {\n this._queuedEntries.push(newEntry);\n }\n }\n }, this);\n\n if (this._queuedEntries.length) {\n this._callback(this.takeRecords(), this);\n }\n};\n\n\n/**\n * Accepts a target and root rect computes the intersection between then\n * following the algorithm in the spec.\n * TODO(philipwalton): at this time clip-path is not considered.\n * https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo\n * @param {Element} target The target DOM element\n * @param {Object} rootRect The bounding rect of the root after being\n * expanded by the rootMargin value.\n * @return {?Object} The final intersection rect object or undefined if no\n * intersection is found.\n * @private\n */\nIntersectionObserver.prototype._computeTargetAndRootIntersection =\n function(target, rootRect) {\n\n // If the element isn't displayed, an intersection can't happen.\n if (window.getComputedStyle(target).display == 'none') return;\n\n var targetRect = getBoundingClientRect(target);\n var intersectionRect = targetRect;\n var parent = getParentNode(target);\n var atRoot = false;\n\n while (!atRoot) {\n var parentRect = null;\n var parentComputedStyle = parent.nodeType == 1 ?\n window.getComputedStyle(parent) : {};\n\n // If the parent isn't displayed, an intersection can't happen.\n if (parentComputedStyle.display == 'none') return;\n\n if (parent == this.root || parent == document) {\n atRoot = true;\n parentRect = rootRect;\n } else {\n // If the element has a non-visible overflow, and it's not the \n // or element, update the intersection rect.\n // Note: and cannot be clipped to a rect that's not also\n // the document rect, so no need to compute a new intersection.\n if (parent != document.body &&\n parent != document.documentElement &&\n parentComputedStyle.overflow != 'visible') {\n parentRect = getBoundingClientRect(parent);\n }\n }\n\n // If either of the above conditionals set a new parentRect,\n // calculate new intersection data.\n if (parentRect) {\n intersectionRect = computeRectIntersection(parentRect, intersectionRect);\n\n if (!intersectionRect) break;\n }\n parent = getParentNode(parent);\n }\n return intersectionRect;\n};\n\n\n/**\n * Returns the root rect after being expanded by the rootMargin value.\n * @return {Object} The expanded root rect.\n * @private\n */\nIntersectionObserver.prototype._getRootRect = function() {\n var rootRect;\n if (this.root) {\n rootRect = getBoundingClientRect(this.root);\n } else {\n // Use / instead of window since scroll bars affect size.\n var html = document.documentElement;\n var body = document.body;\n rootRect = {\n top: 0,\n left: 0,\n right: html.clientWidth || body.clientWidth,\n width: html.clientWidth || body.clientWidth,\n bottom: html.clientHeight || body.clientHeight,\n height: html.clientHeight || body.clientHeight\n };\n }\n return this._expandRectByRootMargin(rootRect);\n};\n\n\n/**\n * Accepts a rect and expands it by the rootMargin value.\n * @param {Object} rect The rect object to expand.\n * @return {Object} The expanded rect.\n * @private\n */\nIntersectionObserver.prototype._expandRectByRootMargin = function(rect) {\n var margins = this._rootMarginValues.map(function(margin, i) {\n return margin.unit == 'px' ? margin.value :\n margin.value * (i % 2 ? rect.width : rect.height) / 100;\n });\n var newRect = {\n top: rect.top - margins[0],\n right: rect.right + margins[1],\n bottom: rect.bottom + margins[2],\n left: rect.left - margins[3]\n };\n newRect.width = newRect.right - newRect.left;\n newRect.height = newRect.bottom - newRect.top;\n\n return newRect;\n};\n\n\n/**\n * Accepts an old and new entry and returns true if at least one of the\n * threshold values has been crossed.\n * @param {?IntersectionObserverEntry} oldEntry The previous entry for a\n * particular target element or null if no previous entry exists.\n * @param {IntersectionObserverEntry} newEntry The current entry for a\n * particular target element.\n * @return {boolean} Returns true if a any threshold has been crossed.\n * @private\n */\nIntersectionObserver.prototype._hasCrossedThreshold =\n function(oldEntry, newEntry) {\n\n // To make comparing easier, an entry that has a ratio of 0\n // but does not actually intersect is given a value of -1\n var oldRatio = oldEntry && oldEntry.isIntersecting ?\n oldEntry.intersectionRatio || 0 : -1;\n var newRatio = newEntry.isIntersecting ?\n newEntry.intersectionRatio || 0 : -1;\n\n // Ignore unchanged ratios\n if (oldRatio === newRatio) return;\n\n for (var i = 0; i < this.thresholds.length; i++) {\n var threshold = this.thresholds[i];\n\n // Return true if an entry matches a threshold or if the new ratio\n // and the old ratio are on the opposite sides of a threshold.\n if (threshold == oldRatio || threshold == newRatio ||\n threshold < oldRatio !== threshold < newRatio) {\n return true;\n }\n }\n};\n\n\n/**\n * Returns whether or not the root element is an element and is in the DOM.\n * @return {boolean} True if the root element is an element and is in the DOM.\n * @private\n */\nIntersectionObserver.prototype._rootIsInDom = function() {\n return !this.root || containsDeep(document, this.root);\n};\n\n\n/**\n * Returns whether or not the target element is a child of root.\n * @param {Element} target The target element to check.\n * @return {boolean} True if the target element is a child of root.\n * @private\n */\nIntersectionObserver.prototype._rootContainsTarget = function(target) {\n return containsDeep(this.root || document, target);\n};\n\n\n/**\n * Adds the instance to the global IntersectionObserver registry if it isn't\n * already present.\n * @private\n */\nIntersectionObserver.prototype._registerInstance = function() {\n if (registry.indexOf(this) < 0) {\n registry.push(this);\n }\n};\n\n\n/**\n * Removes the instance from the global IntersectionObserver registry.\n * @private\n */\nIntersectionObserver.prototype._unregisterInstance = function() {\n var index = registry.indexOf(this);\n if (index != -1) registry.splice(index, 1);\n};\n\n\n/**\n * Returns the result of the performance.now() method or null in browsers\n * that don't support the API.\n * @return {number} The elapsed time since the page was requested.\n */\nfunction now() {\n return window.performance && performance.now && performance.now();\n}\n\n\n/**\n * Throttles a function and delays its execution, so it's only called at most\n * once within a given time period.\n * @param {Function} fn The function to throttle.\n * @param {number} timeout The amount of time that must pass before the\n * function can be called again.\n * @return {Function} The throttled function.\n */\nfunction throttle(fn, timeout) {\n var timer = null;\n return function () {\n if (!timer) {\n timer = setTimeout(function() {\n fn();\n timer = null;\n }, timeout);\n }\n };\n}\n\n\n/**\n * Adds an event handler to a DOM node ensuring cross-browser compatibility.\n * @param {Node} node The DOM node to add the event handler to.\n * @param {string} event The event name.\n * @param {Function} fn The event handler to add.\n * @param {boolean} opt_useCapture Optionally adds the even to the capture\n * phase. Note: this only works in modern browsers.\n */\nfunction addEvent(node, event, fn, opt_useCapture) {\n if (typeof node.addEventListener == 'function') {\n node.addEventListener(event, fn, opt_useCapture || false);\n }\n else if (typeof node.attachEvent == 'function') {\n node.attachEvent('on' + event, fn);\n }\n}\n\n\n/**\n * Removes a previously added event handler from a DOM node.\n * @param {Node} node The DOM node to remove the event handler from.\n * @param {string} event The event name.\n * @param {Function} fn The event handler to remove.\n * @param {boolean} opt_useCapture If the event handler was added with this\n * flag set to true, it should be set to true here in order to remove it.\n */\nfunction removeEvent(node, event, fn, opt_useCapture) {\n if (typeof node.removeEventListener == 'function') {\n node.removeEventListener(event, fn, opt_useCapture || false);\n }\n else if (typeof node.detatchEvent == 'function') {\n node.detatchEvent('on' + event, fn);\n }\n}\n\n\n/**\n * Returns the intersection between two rect objects.\n * @param {Object} rect1 The first rect.\n * @param {Object} rect2 The second rect.\n * @return {?Object} The intersection rect or undefined if no intersection\n * is found.\n */\nfunction computeRectIntersection(rect1, rect2) {\n var top = Math.max(rect1.top, rect2.top);\n var bottom = Math.min(rect1.bottom, rect2.bottom);\n var left = Math.max(rect1.left, rect2.left);\n var right = Math.min(rect1.right, rect2.right);\n var width = right - left;\n var height = bottom - top;\n\n return (width >= 0 && height >= 0) && {\n top: top,\n bottom: bottom,\n left: left,\n right: right,\n width: width,\n height: height\n };\n}\n\n\n/**\n * Shims the native getBoundingClientRect for compatibility with older IE.\n * @param {Element} el The element whose bounding rect to get.\n * @return {Object} The (possibly shimmed) rect of the element.\n */\nfunction getBoundingClientRect(el) {\n var rect;\n\n try {\n rect = el.getBoundingClientRect();\n } catch (err) {\n // Ignore Windows 7 IE11 \"Unspecified error\"\n // https://github.com/w3c/IntersectionObserver/pull/205\n }\n\n if (!rect) return getEmptyRect();\n\n // Older IE\n if (!(rect.width && rect.height)) {\n rect = {\n top: rect.top,\n right: rect.right,\n bottom: rect.bottom,\n left: rect.left,\n width: rect.right - rect.left,\n height: rect.bottom - rect.top\n };\n }\n return rect;\n}\n\n\n/**\n * Returns an empty rect object. An empty rect is returned when an element\n * is not in the DOM.\n * @return {Object} The empty rect.\n */\nfunction getEmptyRect() {\n return {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n width: 0,\n height: 0\n };\n}\n\n/**\n * Checks to see if a parent element contains a child element (including inside\n * shadow DOM).\n * @param {Node} parent The parent element.\n * @param {Node} child The child element.\n * @return {boolean} True if the parent node contains the child node.\n */\nfunction containsDeep(parent, child) {\n var node = child;\n while (node) {\n if (node == parent) return true;\n\n node = getParentNode(node);\n }\n return false;\n}\n\n\n/**\n * Gets the parent node of an element or its host element if the parent node\n * is a shadow root.\n * @param {Node} node The node whose parent to get.\n * @return {Node|null} The parent node or null if no parent exists.\n */\nfunction getParentNode(node) {\n var parent = node.parentNode;\n\n if (parent && parent.nodeType == 11 && parent.host) {\n // If the parent is a shadow root, return the host element.\n return parent.host;\n }\n return parent;\n}\n\n\n// Exposes the constructors globally.\nwindow.IntersectionObserver = IntersectionObserver;\nwindow.IntersectionObserverEntry = IntersectionObserverEntry;\n\n}(window, document));\n","/*! lozad.js - v1.7.0 - 2018-11-08\n* https://github.com/ApoorvSaxena/lozad.js\n* Copyright (c) 2018 Apoorv Saxena; Licensed MIT */\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e():\"function\"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){\"use strict\";var g=Object.assign||function(t){for(var e=1;e", 8 | "license": "MIT", 9 | "scripts": { 10 | "dev": "parcel src/wp-performant-media.js", 11 | "build": "parcel build src/wp-performant-media.js" 12 | }, 13 | "dependencies": { 14 | "intersection-observer": "^0.5.1", 15 | "lozad": "^1.7.0", 16 | "sass": "^1.14.3" 17 | }, 18 | "devDependencies": { 19 | "parcel-bundler": "^1.10.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixelcollective/wp-performant-media/bd41fdd94d62107112c6dc3a8e47216420a0132a/screenshot.png -------------------------------------------------------------------------------- /src/wp-performant-media.js: -------------------------------------------------------------------------------- 1 | import 'intersection-observer'; 2 | import lozad from 'lozad'; 3 | 4 | import './wp-performant-media.scss'; 5 | 6 | lozad(".lazy-load", { 7 | rootMargin: "300px 0px", 8 | loaded: function (el) { 9 | el.classList.add("is-loaded"); 10 | } 11 | }).observe(); -------------------------------------------------------------------------------- /src/wp-performant-media.scss: -------------------------------------------------------------------------------- 1 | .lazy-load { 2 | opacity: 0; 3 | } 4 | 5 | .lazy-load.is-loaded { 6 | -webkit-animation: focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 7 | animation: focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 8 | opacity: 1; 9 | } 10 | 11 | @-webkit-keyframes focus-in { 12 | 0% { 13 | -webkit-filter: blur(12px); 14 | filter: blur(12px); 15 | opacity: 0; 16 | } 17 | 18 | 100% { 19 | -webkit-filter: blur(0); 20 | filter: blur(0); 21 | opacity: 1; 22 | } 23 | } 24 | 25 | @keyframes focus-in { 26 | 0% { 27 | -webkit-filter: blur(12px); 28 | filter: blur(12px); 29 | opacity: 0; 30 | } 31 | 32 | 100% { 33 | -webkit-filter: blur(0); 34 | filter: blur(0); 35 | opacity: 1; 36 | } 37 | } -------------------------------------------------------------------------------- /wp-performant-media.php: -------------------------------------------------------------------------------- 1 | 7 | Version: 1.0.0 8 | Author URI: https://tinypixel.io 9 | */ 10 | 11 | if ( ! defined( 'ABSPATH' ) ) { 12 | exit; 13 | } 14 | 15 | class WP_Performant_Media { 16 | public function __construct() { 17 | 18 | add_action( 'wp_enqueue_scripts', array( $this, "load_scripts" ) ); 19 | 20 | add_filter( 'the_content', array( $this, "lazyloader_filter" ) ); 21 | 22 | } 23 | 24 | public function load_scripts() { 25 | wp_enqueue_script( 'wp-performant-media.js', plugins_url( 'dist/wp-performant-media.js', __FILE__ ), [], '1.0.0', true ); 26 | wp_enqueue_style( 'wp-performant-media.css', plugins_url( 'dist/wp-performant-media.css', __FILE__ ), [], '1.0.0' ); 27 | } 28 | 29 | public function lazyloader_filter( $content ) { 30 | $content = preg_replace( "//i", '', $content ); 31 | $content = preg_replace( '//i', '', $content ); 32 | $content = preg_replace( '//i', '', $content); 33 | return $content; 34 | } 35 | } 36 | 37 | new WP_Performant_Media(); 38 | --------------------------------------------------------------------------------