From 280d67eb7f6614c82d4a3731d849b7ed14568fb9 Mon Sep 17 00:00:00 2001 From: Shin <2082119+shinsenter@users.noreply.github.com> Date: Wed, 17 Apr 2019 14:15:47 +0900 Subject: [PATCH] Fixed issues about source tag not loaded --- README.md | 7 +++---- dist/defer_plus.min.js | 2 +- package-lock.json | 2 +- package.json | 2 +- src/extensions.js | 31 +++++++++++++++++++------------ 5 files changed, 25 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 9559793..6898706 100644 --- a/README.md +++ b/README.md @@ -3,15 +3,14 @@ 🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website. -![HitCount](http://hits.dwyl.com/shinsenter/defer.js.svg) ![GitHub](https://img.shields.io/github/license/shinsenter/defer.js.svg) +![GitHub Release Date](https://img.shields.io/github/release-date/shinsenter/defer.js.svg) [![CodeFactor](https://www.codefactor.io/repository/github/shinsenter/defer.js/badge)](https://www.codefactor.io/repository/github/shinsenter/defer.js) +![GitHub issues](https://img.shields.io/github/issues-raw/shinsenter/defer.js.svg) ![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/shinsenter/defer.js.svg) [![Post an issue](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/shinsenter/defer.js/issues) -![GitHub issues](https://img.shields.io/github/issues-raw/shinsenter/defer.js.svg) -![GitHub Release Date](https://img.shields.io/github/release-date/shinsenter/defer.js.svg) ![npm](https://img.shields.io/npm/v/@shinsenter/defer.js.svg) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@shinsenter/defer.js.svg) [![jsDelivr hits (GitHub)](https://data.jsdelivr.com/v1/package/npm/@shinsenter/defer.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@shinsenter/defer.js) @@ -244,7 +243,7 @@ In order to lazy-load your content, you must use some `data-` attributes instead Put this script anywhere you want within the `` tag: ```html - + ``` diff --git a/dist/defer_plus.min.js b/dist/defer_plus.min.js index 79eca25..f573712 100644 --- a/dist/defer_plus.min.js +++ b/dist/defer_plus.min.js @@ -1,2 +1,2 @@ /*@shinsenter/defer.js*/ -!function(e,o,t,n,i,r){function c(e,t){r?n(e,t||80):i.push(e,t)}function f(e,t,n,i){return t&&o.getElementById(t)||(i=o.createElement(e||'SCRIPT'),t&&(i.id=t),n&&(i.onload=n),o.head.appendChild(i)),i||{}}r=/p/.test(o.readyState),c.dom=f,e.defer=c,e.addEventListener('on'+t in e?t:'load',function(){for(r=t;i[0];)c(i.shift(),i.shift())}),e.deferscript=function(t,n,e,i){c(function(e){f(!1,n,i).src=t},e)}}(this,document,'pageshow',setTimeout,[]),function(u,t){var a='IntersectionObserver',d='src',l='lazied',h='data-',p=h+l,m='forEach',y='getAttribute',c='appendChild',b=Function(),v=u.defer||b,f=v.dom||b;function g(e){return[].slice.call(t.querySelectorAll(e))}function e(s){return function(e,t,o,r,c,f){v(function(n,t){function i(n){!1!==(r||b).call(n,n)&&(f||['srcset',d,'data','style'])[m](function(e,t){(t=n[y](h+e))&&(n[e]=t)}),n.className+=' '+(o||l)}t=a in u?(n=new u[a](function(e){e[m](function(e,t){e.isIntersecting&&(t=e.target)&&(n.unobserve(t),i(t))})},c)).observe.bind(n):i,g(e||s+'['+h+d+']:not(['+p+'])')[m](function(e){e[y](p)||(e.setAttribute(p,s),t(e))})},t)}}function n(){var r=t.head;v(function(t,n,i,o){t=[].concat(g((i='script[type=deferjs]')+':not('+(o='[async]')+')'),g(i+o)),function e(){if(0!=t){for(o in n=f(),(i=t.shift()).parentNode.removeChild(i),i.removeAttribute('type'),i)'string'==typeof i[o]&&n[o]!=i[o]&&(n[o]=i[o]);n[d]&&!n.hasAttribute('async')?(n.onload=n.onerror=e,r[c](n)):(r[c](n),v(e,.1))}}()},8)}v.all=n,u.deferstyle=function(t,n,e,i){v(function(e){(e=f('LINK',n,i)).rel='stylesheet',e.href=t},e)},u.deferimg=e('IMG'),u.deferiframe=e('IFRAME'),n()}(this,document); \ No newline at end of file +!function(e,o,t,n,i,r){function c(e,t){r?n(e,t||80):i.push(e,t)}function f(e,t,n,i){return t&&o.getElementById(t)||(i=o.createElement(e||'SCRIPT'),t&&(i.id=t),n&&(i.onload=n),o.head.appendChild(i)),i||{}}r=/p/.test(o.readyState),c.dom=f,e.defer=c,e.addEventListener('on'+t in e?t:'load',function(){for(r=t;i[0];)c(i.shift(),i.shift())}),e.deferscript=function(t,n,e,i){c(function(e){f(!1,n,i).src=t},e)}}(this,document,'pageshow',setTimeout,[]),function(u,n){var d='IntersectionObserver',a='src',l='lazied',h='data-',p=h+l,m='load',y='forEach',r='appendChild',b='getAttribute',c=n.head,g=Function(),v=u.defer||g,f=v.dom||g;function I(e,t){return[].slice.call((t||n).querySelectorAll(e))}function e(s){return function(e,t,o,r,c,f){v(function(n,t){function i(n){!1!==(r||g).call(n,n)&&(I('SOURCE',n)[y](i),(f||['srcset',a,'style'])[y](function(e,t){(t=n[b](h+e))&&(n[e]=t)}),m in n&&n[m]()),n.className+=' '+(o||l)}t=d in u?(n=u[d](function(e){e[y](function(e,t){e.isIntersecting&&(t=e.target)&&(n.unobserve(t),i(t))})},c)).observe.bind(n):i,I(e||s+'['+h+a+']:not(['+p+'])')[y](function(e){e[b](p)||(e.setAttribute(p,s),t(e))})},t)}}function t(){v(function(t,n,i,o){t=[].concat(I((i='script[type=deferjs]')+':not('+(o='[async]')+')'),I(i+o)),function e(){if(0!=t){for(o in n=f(),(i=t.shift()).parentNode.removeChild(i),i.removeAttribute('type'),i)'string'==typeof i[o]&&n[o]!=i[o]&&(n[o]=i[o]);n[a]&&!n.hasAttribute('async')?(n.onload=n.onerror=e,c[r](n)):(c[r](n),v(e,.1))}}()},8)}v.all=t,u.deferstyle=function(t,n,e,i){v(function(e){(e=f('LINK',n,i)).rel='stylesheet',e.href=t},e)},u.deferimg=e('IMG'),u.deferiframe=e('IFRAME'),t()}(this,document); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5509422..d7dcc56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@shinsenter/defer.js", - "version": "1.1.7", + "version": "1.1.7b", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 6997b61..e1c5de6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shinsenter/defer.js", - "version": "1.1.7", + "version": "1.1.7b", "description": "🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website. https://github.com/shinsenter/defer.js", "homepage": "https://github.com/shinsenter/defer.js#readme", "author": "Mai Nhut Tan ", diff --git a/src/extensions.js b/src/extensions.js index 7188307..f7bebfd 100644 --- a/src/extensions.js +++ b/src/extensions.js @@ -40,40 +40,44 @@ var deferimg_fn = 'deferimg'; var deferiframe_fn = 'deferiframe'; + // IntersectionObserver class var OBSERVER_CLASS = 'IntersectionObserver'; // Real attributes for lazy-loaded media var ATTR_SRC = 'src'; var ATTR_SRCSET = 'srcset'; var ATTR_STYLE = 'style'; - var ATTR_DATA = 'data'; var ATTR_TYPE = 'type'; // Tag names var IFRAME = 'IFRAME'; var IMG = 'IMG'; var LINK = 'LINK'; + var SOURCE = 'SOURCE'; // Tag attributes var APPLIED_CLASS = 'lazied'; var DATASET_PREFIX = 'data-'; var APPLIED_SELECTOR = DATASET_PREFIX + APPLIED_CLASS; + // Element methods + var LOAD = 'load'; var FOR_EACH = 'forEach'; + var APPEND_CHILD = 'appendChild'; var GET_ATTRIBUTE = 'getAttribute'; var SET_ATTRIBUTE = 'setAttribute'; var REMOVE_ATTRIBUTE = 'removeAttribute'; - var APPEND_CHILD = 'appendChild' // Common used constants - var FALSE = false; + var HEAD = document.head; var NOOP = Function(); + var FALSE = false; var defer = window.defer || NOOP; - var dom = defer.dom || NOOP; + var dom = defer.dom || NOOP; // Query selector - function query(selector) { - return [].slice.call(document.querySelectorAll(selector)); + function query(selector, parent) { + return [].slice.call((parent || document).querySelectorAll(selector)); } /** @@ -116,18 +120,23 @@ // This method sets the real attributes function display(media) { if ((callback || NOOP).call(media, media) !== FALSE) { - (attributes || [ATTR_SRCSET, ATTR_SRC, ATTR_DATA, ATTR_STYLE])[FOR_EACH](function(attr, value) { + query(SOURCE, media)[FOR_EACH](display); + + (attributes || [ATTR_SRCSET, ATTR_SRC, ATTR_STYLE])[FOR_EACH](function(attr, value) { value = media[GET_ATTRIBUTE](DATASET_PREFIX + attr); if (value) {media[attr] = value} }); + + if (LOAD in media) {media[LOAD]();} } + media.className += ' ' + (lazied_class || APPLIED_CLASS); } // Force using IntersectionObserver when posible // It class is the heart of media lazy-loading if (OBSERVER_CLASS in window) { - observer = new window[OBSERVER_CLASS](function(items) { + observer = window[OBSERVER_CLASS](function(items) { items[FOR_EACH](function(item, target) { if (item.isIntersecting && (target = item.target)) { observer.unobserve(target); @@ -152,8 +161,6 @@ * @returns {void} */ function defersmart() { - var head = document.head; - function loadscript(scripts, tag, base, attr) { base = 'script[type=deferjs]'; attr = '[async]'; @@ -174,9 +181,9 @@ if (tag[ATTR_SRC] && !tag.hasAttribute('async')) { tag.onload = tag.onerror = appendtag - head[APPEND_CHILD](tag); + HEAD[APPEND_CHILD](tag); } else { - head[APPEND_CHILD](tag); + HEAD[APPEND_CHILD](tag); defer(appendtag, 0.1); } }