tattica
Version:
Tactical and adaptive asset loading library
2 lines (1 loc) • 3.77 kB
JavaScript
var t=function(t,r){return t[r]?t[r].value:null},r=function(t,r){var e=t.el,i=t.src,n=t.timestamp,a=t.timeout,o=t.callback,l=i[r.string]||i.medium||i.slow||i.default,u=e.attributes["data-is-loaded"];return new Promise(function(s,c){u&&s(),a&&setTimeout(s,a),e.onload=function(){e.style.visibility="visible",e.setAttribute("data-is-loaded",!0),n&&e.setAttribute("data-timestamp-loaded",Date.now()),o&&o(e),s()},e.onerror=function(a){var o=i.fall||"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",l={err:a,ref:r.ref,fall:i.fall,fallUsed:o,key:t.key};n&&e.setAttribute("data-timestamp-loaded",Date.now()),e.src=o,c(l)},n&&e.setAttribute("data-timestamp-start",Date.now()),e.src=l})},e=function(t){var r=console.error;r("\n The '"+t.ref+"' attribute you inserted in element at key '"+t.key+"' is invalid. \n The 'data-src-fall' provided is: "+t.fall+"\n Fallback used: "+t.fallUsed+"\n "),r(t.err.target)},i=function(){return new Promise(function(t){window.requestIdleCallback(function(){t()},{timeout:2e3})})},n=function(t,a,o,l){void 0===l&&(l=0);try{function u(){return Promise.resolve(i()).then(function(){n(t,a,o,s)})}var s=l+1,c=t[l];if(!c)return o(),Promise.resolve();var d=c.order,f=d.dataBlock||d.dataPriorityBlock,m=function(){if(f){var i=t.filter(function(t){return t.order.dataBlock===f||t.order.dataPriorityBlock===f});return Promise.resolve(function(t,i){return new Promise(function(n){for(var a=[],o=0,l=t;o<l.length;o+=1)a.push(r(l[o],i).catch(e));Promise.all(a).then(function(){return n()})})}(i,a)).then(function(){})}return Promise.resolve(r(c,a).catch(e)).then(function(){})}();return Promise.resolve(m&&m.then?m.then(u):u())}catch(t){return Promise.reject(t)}},a=function(t,r){return new Promise(function(e){return n(t,r,e)})};module.exports=function(r){void 0===r&&(r={});var e=document.querySelectorAll("["+(r.flag||"data-flag")+"]"),i=function(r,e){var i=[];return r.forEach(function(r,n){var a=r.attributes;i.push({el:r,key:n,timestamp:e.timestamp,timeout:void 0!==e.timeout?e.timeout:1e3,priority:Number(t(a,"data-priority")||t(a,"data-priority-block"))||null,order:{dataPriority:t(a,"data-priority"),dataPriorityBlock:t(a,"data-priority-block"),dataBlock:t(a,"data-block")},src:{initial:t(a,"src"),default:t(a,"data-src"),medium:t(a,"data-src-medium"),slow:t(a,"data-src-slow"),fall:t(a,"data-src-fall")},callback:e.callback||null})}),i}(e,r),n=function(){if(void 0===navigator.connection)return{string:"default",ref:"data-src"};var t,r,e=navigator.connection.effectiveType.split("g")[0],i=Number(e.match(/\d/)[0]);return i<3?(t="slow",r="data-src-slow"):i<4?(t="medium",r="data-src-medium"):(t="default",r="data-src"),{num:i,string:t,ref:r}}();!function(t,r){void 0===r&&(r="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="),t.forEach(function(t){var e=t.el;e.src&&""!==e.src||(e.style.visibility="hidden",e.src=r)})}(i,r.string),window.addEventListener("load",function(){r.loadIntersections&&function(t){var r=Object.keys(t).map(function(r){return t[r]}),e=new IntersectionObserver(function(t){t.forEach(function(t){if(t.isIntersecting&&!t.target.attributes["data-is-loaded"]){var r=t.target;r.style.visibility="visible",r.src=r.attributes["data-src"].value,r.setAttribute("data-is-loaded",!0)}})},{root:null,rootMargin:"0px",threshold:.2});r.forEach(function(t){e.observe(t)})}(e),window.requestIdleCallback(function(){try{var t=function(t){return{withPriority:t.filter(function(t){return t.order.dataPriority||t.order.dataPriorityBlock}).sort(function(t,r){return t.priority-r.priority}),others:t.filter(function(t){return!t.priority})}}(i);return Promise.resolve(a(t.withPriority,n)).then(function(){return Promise.resolve(a(t.others,n)).then(function(){})})}catch(t){return Promise.reject(t)}},{timeout:2e3})})};