diff --git a/.build/.eslintrc b/.build/.eslintrc index 5a472e2..978a5cd 100644 --- a/.build/.eslintrc +++ b/.build/.eslintrc @@ -75,7 +75,7 @@ "max-depth": "error", "max-len": "off", "max-lines": "off", - "max-lines-per-function": "error", + "max-lines-per-function": ["error", 100], "max-nested-callbacks": "error", "max-params": "off", "max-statements": "off", diff --git a/README.md b/README.md index 464e2d6..f65498c 100644 --- a/README.md +++ b/README.md @@ -5,61 +5,66 @@ [![NPM](https://img.shields.io/npm/l/@shinsenter/defer.js)](https://code.shin.company/defer.js/blob/master/LICENSE) [![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@shinsenter/defer.js)](https://snyk.io/advisor/npm-package/@shinsenter/defer.js) [![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/shinsenter/defer.js)](https://www.codefactor.io/repository/github/shinsenter/defer.js) - -* * * - [![GitHub Release Date](https://img.shields.io/github/release-date/shinsenter/defer.js)](https://code.shin.company/defer.js/releases) [![GitHub package.json version](https://img.shields.io/github/package-json/v/shinsenter/defer.js)](https://code.shin.company/defer.js/releases) [![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@shinsenter/defer.js)](https://www.npmjs.com/package/@shinsenter/defer.js) [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@shinsenter/defer.js)](https://www.jsdelivr.com/package/npm/@shinsenter/defer.js) + +* * * + + +## Introduction + +Lagging Big CSS files, slow JavaScript, or bulky media resources can cause issues with your website's Web Vitals, leading to a slow and frustrating user experience. But what if you could fully defer these resources and improve your website's load speed? + +By using Defer.js, you can say goodbye to these issues! With its lazy loading capabilities, dependency-free design, lightning-fast performance, and hard-won experience, Defer.js is the perfect solution for optimizing your website's Web Vitals. Whether you're using a modern or legacy browser, Defer.js makes it easy to enhance your website's user experience with lightning-fast loading times. + [![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js) - **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js) -- **Version**: 3.4.0 +- **Version**: 3.5.0 - **Author**: Mai Nhut Tan -- **Copyright**: 2022 AppSeeds +- **Copyright**: 2019-2023 SHIN Company - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE) -> [NEED HELP] Please help me improve the documentation and examples. I appreciate your love and support. +--- -* * * +## Document in other languages +> [NEED HELP] Let's make the documentation and examples better together! -## Introduction +### 日本語 -Big CSS files, slow JavaScript (third-party add-ons, etc.), -or media resources (photos, videos, iframes) on your website may cause -[Web Vitals](https://web.dev/vitals/) issues in real scenarios. +日本人のはこちらの記事を参考にしていただければ幸いです。 -Fully deferring (lazy loading) those resources may help your website -reduce those Web Vitals issues, or even deliver faster page load speed. +- アタルさんの[Defer.js ドキュメント （日本語訳）](https://blog.gadgets-geek.net/2023/02/deferjs-doc-japanese.html) +- あトんさんの[記事](https://www.heavy-peat.com/2022/02/defer.html) +- リモスキさんの[記事](https://www.limosuki.com/2022/06/twitter-lazyload-deferjs.html) -You would be happy, and your customers would be happy, too. +#### Credits -> [Japanese] 日本人の方は[こちらの記事](https://www.limosuki.com/2022/06/twitter-lazyload-deferjs.html)をご参考にして頂ければと思います。 +I would like to express warm thanks to [@Ataruchi](https://twitter.com/Ataruchi), [@HeavyPeat](https://twitter.com/HeavyPeat) and [Limosuki](https://www.limosuki.com/) for their articles in Japanese. +*** -## Why you should consider using Defer.js? +## Why Choose Defer.js -- 🧩 Lazy load almost anything -- 🚀 Dependency-free, no jQuery, amazing fast +- 🧩 Lazy load almost anything with ease +- 🚀 Lightweight and fast, with no dependencies +- 🤝 Effortlessly integrates with your favorite frameworks +- 🔰 Easy to use, even for beginners - ⚡️ Super tiny (minzipped size is around 1KB) -- 🦾 Hardened (over 3 years old and used in many apps) -- 🎯 [Core Web Vitals](https://web.dev/vitals/) friendly -- 🤝 Works well with your favorite frameworks -- 🔰 Very easy to use -- 📱 Smartphone browser friendly -- ✅ Supports legacy browsers (IE9+) +- 🦾 Optimized for the latest Web Vitals standards +- 📱 Optimized for use on smartphones +- ✅ Supports legacy browsers like Internet Explorer 9 +*Legacy browsers like Internet Explorer 9 require `IntersectionObserver` polyfill. -## Browser support +## Browser Support -The library works perfectly on any modern browser. -It also works on legacy browsers like Internet Explorer 9 -* (with `IntersectionObserver` polyfill library). - -- 🖥 IE9+ / Microsoft EDGE +Defer.js is compatible with all modern browsers, including: +- 🖥 IE9+ / Edge - 🖥 Firefox 4+ - 🖥 Safari 3+ - 🖥 Chrome @@ -67,20 +72,21 @@ It also works on legacy browsers like Internet Explorer 9 - 📱 Android 4+ - 📱 iOS 3.2+ - ## Getting started +Defer.js is an easy-to-use library that will help boost your website's performance by reducing loading times. Here's how to get started: + ### Basic -Just put a ` + + @@ -88,16 +94,15 @@ Just put a ` + + @@ -105,8 +110,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin ### Compatibility with older versions -If you have no time to upgrade from an older version, -just use `defer_plus.min.js` instead of `defer.min.js`. +If you're using an older version of Defer.js, you can use `defer_plus.min.js` instead of `defer.min.js`. ```html @@ -114,7 +118,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`. My Awesome Page - + @@ -122,21 +126,16 @@ just use `defer_plus.min.js` instead of `defer.min.js`. ### For OLD browsers (such as IE9) -To take advantage of native performance for legacy browsers (such as IE9) -that don't support `IntersectionObserver` feature, -you should load `IntersectionObserver` polyfill library -right after the `defer.min.js` script tag as the following example: +To enhance performance for legacy browsers that don't support the `IntersectionObserver` feature, you can load the IntersectionObserver polyfill library after the `defer.min.js` script tag. ```html - + - - - + + ``` -*HINT*: Modern browsers support `IntersectionObserver` feature, -so you don't have to be concerned about it if you don't care about IE users. +*NOTE*: Modern browsers support the `IntersectionObserver` feature, so you don't have to worry about adding the polyfill if you don't have legacy browsers in mind. ## Functions * [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ void @@ -678,7 +677,7 @@ he/she will see a message as soon as an element with `id="surprise-me"` appears. ```html ``` @@ -817,7 +816,8 @@ AddThis add-on will not be loaded until the user starts interacting with the pag
- - + + @@ -80,8 +80,9 @@

Using magic type="deferjs" attribute:

will not execute unless the user starts interacting with your page.
Note: - Resource hints feature was added since v3.2 - as it is recommended to prevent issues called Taming the Waterfall. + Resource hints + feature was added since v3.2 as it is recommended to prevent issues called + Taming the Waterfall. This feature is discussed at #112.
@@ -108,8 +109,9 @@

Using your value for the type attribute, such as type="my-magic" will not execute unless the user starts interacting with your page.
Note: - Resource hints feature was added since v3.2 - as it is recommended to prevent issues called Taming the Waterfall. + Resource hints + feature was added since v3.2 as it is recommended to prevent issues called + Taming the Waterfall. This feature is discussed at #112.

@@ -563,7 +565,7 @@

Scroll and reveal:

@@ -741,45 +743,48 @@

Lazy load Prism.js library:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/defer.min.js b/dist/defer.min.js index d15a5e0..646f18a 100644 --- a/dist/defer.min.js +++ b/dist/defer.min.js @@ -1,2 +1,2 @@ -/*!@shinsenter/defer.js@3.4.0*/ -!(function(n){function t(e){n.addEventListener(e,B)}function o(e){n.removeEventListener(e,B)}function u(e,n,t){L?C(e,n):(t||u.lazy&&void 0===t?q:S).push(e,n)}function c(e){k.head.appendChild(e)}function i(e,n){z.call(e.attributes)[y](n)}function r(e,n,t,o){return o=(n?k.getElementById(n):o)||k.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function s(e,n,t){(t=e.src)&&((n=r(m)).rel="preload",n.as=h,n.href=t,(t=e[g](w))&&n[b](w,t),(t=e[g](x))&&n[b](x,t),c(n))}function a(e,n){return z.call((n||k).querySelectorAll(e))}function f(e,n){e.parentNode.replaceChild(n,e)}function l(t,e){a("source,img",t)[y](l),i(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[b](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),p in t&&t[p]()}function e(e,n,t){u(function(t){(t=a(e||N))[y](s),(function o(e,n){(e=t[E]())&&((n=r(e.nodeName)).text=e.text,i(e,function(e){"type"!=e.name&&n[b](e.name,e.value)}),n.src&&!n[g]("async")?(n.onload=n.onerror=o,f(e,n)):(f(e,n),o()))})()},n,t)}var d="Defer",m="link",h="script",p="load",v="pageshow",y="forEach",g="getAttribute",b="setAttribute",E="shift",w="crossorigin",x="integrity",A=["mousemove","keydown","touchstart","wheel"],I="on"+v in n?v:p,N=h+"[type=deferjs]",j=n.IntersectionObserver,k=n.document||n,C=n.setTimeout,L=/p/.test(k.readyState),S=[],q=[],z=S.slice,B=function(e,n){for(n=I==e.type?(o(I),L=u,A[y](t),S):(A[y](o),q);n[0];)C(n[E](),n[E]())};e(),u.all=e,u.dom=function(e,n,i,c,r){u(function(t){function o(e){c&&!1===c(e)||l(e,i)}t=!!j&&new j(function(e){e[y](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},r),a(e||"[data-src]")[y](function(e){e[d]!=u&&(e[d]=u,t?t.observe(e):o(e))})},n,!1)},u.css=function(n,t,e,o,i){u(function(e){(e=r(m,t,o)).rel="stylesheet",e.href=n,c(e)},e,i)},u.js=function(n,t,e,o,i){u(function(e){(e=r(h,t,o)).src=n,c(e)},e,i)},u.reveal=l,n[d]=u,L||t(I)})(this); \ No newline at end of file +/*!@shinsenter/defer.js@3.5.0*/ +!(function(t,u){function e(n){t.addEventListener(n,N)}function o(n){t.removeEventListener(n,N)}function s(n,t,e){k?I(n,t):((e===u?s.lazy:e)?L:C).push(n,t)}function i(n){A.head.appendChild(n)}function c(n,t){j.call(n.attributes)[g](function(n){t(n.name,n.value)})}function r(n,t,e,o){return o=t&&A.getElementById(t)||A.createElement(n),t&&(o.id=t),e&&(o.onload=e),o}function f(n,t){return j.call((t||A).querySelectorAll(n))}function a(o,n){f("source,img",o)[g](a),c(o,function(n,t,e){(e=/^data-(.+)/.exec(n))&&o[b](e[1],t)}),"string"==typeof n&&n&&(o.className+=" "+n),h in o&&o[h]()}function n(n,t,e){s(function(t){(t=f(n||"script[type=deferjs]"))[g](function(n,e){n.src&&(e=r(d),c(n,function(n,t){n!=w&&e[b]("src"==n?"href":n,t)}),e.rel="preload",e.as=p,i(e))}),(function o(n,e){(n=t[E]())&&(e=r(p),c(n,function(n,t){n!=w&&e[b](n,t)}),e.text=n.text,n.parentNode.replaceChild(e,n),e.src&&!e.getAttribute("async")?e.onload=e.onerror=o:o())})()},t,e)}var l="Defer",d="link",p="script",h="load",m="pageshow",y=["touchstart","keydown","mousemove","wheel"],v="on"+m in t?m:h,g="forEach",b="setAttribute",E="shift",w="type",x=t.IntersectionObserver,A=t.document||t,I=t.setTimeout,j=y.slice,k=/p/.test(A.readyState),C=[],L=[],N=function(n,t){for(t=n.type==v?(o(v),k=s,y[g](e),C):(y[g](o),L);t[0];)I(t[E](),t[E]())};n(),s.all=n,s.dom=function(n,t,c,i,r){s(function(e){function o(n){i&&!1===i(n)||a(n,c)}e=x?new x(function(n){n[g](function(n,t){n.isIntersecting&&(e.unobserve(t=n.target),o(t))})},r):u,f(n||"[data-src]")[g](function(n){n[l]!=s&&(n[l]=s,e?e.observe(n):o(n))})},t,!1)},s.css=function(t,e,n,o,c){s(function(n){(n=r(d,e,o)).rel="stylesheet",n.href=t,i(n)},n,c)},s.js=function(t,e,n,o,c){s(function(n){(n=r(p,e,o)).src=t,i(n)},n,c)},s.reveal=a,t[l]=s,k||e(v)})(this); \ No newline at end of file diff --git a/dist/defer_plus.min.js b/dist/defer_plus.min.js index f83a8f4..0108703 100644 --- a/dist/defer_plus.min.js +++ b/dist/defer_plus.min.js @@ -1,2 +1,2 @@ -/*!@shinsenter/defer.js@3.4.0*/ -!(function(n){function t(e){n.addEventListener(e,z)}function o(e){n.removeEventListener(e,z)}function s(e,n,t){D?C(e,n):(t||s.lazy&&void 0===t?S:L).push(e,n)}function r(e){k.head.appendChild(e)}function i(e,n){q.call(e.attributes)[v](n)}function c(e,n,t,o){return o=(n?k.getElementById(n):o)||k.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function f(e,n,t){(t=e.src)&&((n=c(m)).rel="preload",n.as=h,n.href=t,(t=e[g](w))&&n[b](w,t),(t=e[g](j))&&n[b](j,t),r(n))}function u(e,n){return q.call((n||k).querySelectorAll(e))}function a(e,n){e.parentNode.replaceChild(n,e)}function l(t,e){u("source,img",t)[v](l),i(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[b](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),p in t&&t[p]()}function e(e,n,t){s(function(t){(t=u(e||I))[v](f),(function o(e,n){(e=t[E]())&&((n=c(e.nodeName)).text=e.text,i(e,function(e){"type"!=e.name&&n[b](e.name,e.value)}),n.src&&!n[g]("async")?(n.onload=n.onerror=o,a(e,n)):(a(e,n),o()))})()},n,t)}var d="Defer",m="link",h="script",p="load",y="pageshow",v="forEach",g="getAttribute",b="setAttribute",E="shift",w="crossorigin",j="integrity",x=["mousemove","keydown","touchstart","wheel"],A="on"+y in n?y:p,I=h+"[type=deferjs]",N=n.IntersectionObserver,k=n.document||n,C=n.setTimeout,D=/p/.test(k.readyState),L=[],S=[],q=L.slice,z=function(e,n){for(n=A==e.type?(o(A),D=s,x[v](t),L):(x[v](o),S);n[0];)C(n[E](),n[E]())};e(),s.all=e,s.dom=function(e,n,i,r,c){s(function(t){function o(e){r&&!1===r(e)||l(e,i)}t=!!N&&new N(function(e){e[v](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},c),u(e||"[data-src]")[v](function(e){e[d]!=s&&(e[d]=s,t?t.observe(e):o(e))})},n,!1)},s.css=function(n,t,e,o,i){s(function(e){(e=c(m,t,o)).rel="stylesheet",e.href=n,r(e)},e,i)},s.js=function(n,t,e,o,i){s(function(e){(e=c(h,t,o)).src=n,r(e)},e,i)},s.reveal=l,n[d]=s,D||t(A)})(this),(function(e,n){n=e.defer=e.Defer,e.deferimg=e.deferiframe=n.dom,e.deferstyle=n.css,e.deferscript=n.js})(this); \ No newline at end of file +/*!@shinsenter/defer.js@3.5.0*/ +!(function(t,f){function n(e){t.addEventListener(e,L)}function o(e){t.removeEventListener(e,L)}function s(e,t,n){k?A(e,t):((n===f?s.lazy:n)?D:C).push(e,t)}function r(e){x.head.appendChild(e)}function i(e,t){I.call(e.attributes)[g](function(e){t(e.name,e.value)})}function c(e,t,n,o){return o=t&&x.getElementById(t)||x.createElement(e),t&&(o.id=t),n&&(o.onload=n),o}function u(e,t){return I.call((t||x).querySelectorAll(e))}function a(o,e){u("source,img",o)[g](a),i(o,function(e,t,n){(n=/^data-(.+)/.exec(e))&&o[b](n[1],t)}),"string"==typeof e&&e&&(o.className+=" "+e),h in o&&o[h]()}function e(e,t,n){s(function(t){(t=u(e||"script[type=deferjs]"))[g](function(e,n){e.src&&(n=c(d),i(e,function(e,t){e!=w&&n[b]("src"==e?"href":e,t)}),n.rel="preload",n.as=p,r(n))}),(function o(e,n){(e=t[E]())&&(n=c(p),i(e,function(e,t){e!=w&&n[b](e,t)}),n.text=e.text,e.parentNode.replaceChild(n,e),n.src&&!n.getAttribute("async")?n.onload=n.onerror=o:o())})()},t,n)}var l="Defer",d="link",p="script",h="load",m="pageshow",y=["touchstart","keydown","mousemove","wheel"],v="on"+m in t?m:h,g="forEach",b="setAttribute",E="shift",w="type",j=t.IntersectionObserver,x=t.document||t,A=t.setTimeout,I=y.slice,k=/p/.test(x.readyState),C=[],D=[],L=function(e,t){for(t=e.type==v?(o(v),k=s,y[g](n),C):(y[g](o),D);t[0];)A(t[E](),t[E]())};e(),s.all=e,s.dom=function(e,t,i,r,c){s(function(n){function o(e){r&&!1===r(e)||a(e,i)}n=j?new j(function(e){e[g](function(e,t){e.isIntersecting&&(n.unobserve(t=e.target),o(t))})},c):f,u(e||"[data-src]")[g](function(e){e[l]!=s&&(e[l]=s,n?n.observe(e):o(e))})},t,!1)},s.css=function(t,n,e,o,i){s(function(e){(e=c(d,n,o)).rel="stylesheet",e.href=t,r(e)},e,i)},s.js=function(t,n,e,o,i){s(function(e){(e=c(p,n,o)).src=t,r(e)},e,i)},s.reveal=a,t[l]=s,k||n(v)})(this),(function(e,t){t=e.defer=e.Defer,e.deferimg=e.deferiframe=t.dom,e.deferstyle=t.css,e.deferscript=t.js})(this); \ No newline at end of file diff --git a/dist/polyfill.min.js b/dist/polyfill.min.js index 8231333..44e1476 100644 --- a/dist/polyfill.min.js +++ b/dist/polyfill.min.js @@ -1 +1 @@ -!(function(){"use strict";function r(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch(e){return null}}function u(t){this.time=t.time,this.target=t.target,this.rootBounds=o(t.rootBounds),this.boundingClientRect=o(t.boundingClientRect),this.intersectionRect=o(t.intersectionRect||a()),this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=this.intersectionRect;this.intersectionRatio=(e=e.width*e.height)?Number((n.width*n.height/e).toFixed(4)):this.isIntersecting?1:0}function t(t,e){var n,o,i,r=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(r.root&&1!=r.root.nodeType&&9!=r.root.nodeType)throw new Error("root must be a Document or Element");this._checkForIntersections=(n=this._checkForIntersections.bind(this),o=this.THROTTLE_TIMEOUT,i=null,function(){i=i||setTimeout(function(){n(),i=null},o)}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(r.rootMargin),this.thresholds=this._initThresholds(r.threshold),this.root=r.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detachEvent&&t.detachEvent("on"+e,n)}function g(t){var e;try{e=t.getBoundingClientRect()}catch(n){}return e?e.width&&e.height?e:{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}:a()}function a(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function o(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function m(t,e){var n=e.top-t.top,o=e.left-t.left;return{top:n,left:o,height:e.height,width:e.width,bottom:n+e.height,right:o+e.width}}function n(t,e){for(var n=e;n;){if(n==t)return!0;n=_(n)}return!1}function _(t){var e=t.parentNode;return 9==t.nodeType&&t!=b?r(t):(e=e&&e.assignedSlot?e.assignedSlot.parentNode:e)&&11==e.nodeType&&e.host?e.host:e}function i(t){return t&&9===t.nodeType}var b,c,w,v;"object"==typeof window&&("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype?"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0 -- **Copyright**: 2022 AppSeeds +- **Copyright**: 2019-2023 SHIN Company - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE) -> [NEED HELP] Please help me improve the documentation and examples. I appreciate your love and support. +--- -* * * +## Document in other languages +> [NEED HELP] Let's make the documentation and examples better together! -## Introduction +### 日本語 -Big CSS files, slow JavaScript (third-party add-ons, etc.), -or media resources (photos, videos, iframes) on your website may cause -[Web Vitals](https://web.dev/vitals/) issues in real scenarios. +日本人のはこちらの記事を参考にしていただければ幸いです。 -Fully deferring (lazy loading) those resources may help your website -reduce those Web Vitals issues, or even deliver faster page load speed. +- アタルさんの[Defer.js ドキュメント （日本語訳）](https://blog.gadgets-geek.net/2023/02/deferjs-doc-japanese.html) +- あトんさんの[記事](https://www.heavy-peat.com/2022/02/defer.html) +- リモスキさんの[記事](https://www.limosuki.com/2022/06/twitter-lazyload-deferjs.html) -You would be happy, and your customers would be happy, too. +#### Credits -> [Japanese] 日本人の方は[こちらの記事](https://www.limosuki.com/2022/06/twitter-lazyload-deferjs.html)をご参考にして頂ければと思います。 +I would like to express warm thanks to [@Ataruchi](https://twitter.com/Ataruchi), [@HeavyPeat](https://twitter.com/HeavyPeat) and [Limosuki](https://www.limosuki.com/) for their articles in Japanese. +*** -## Why you should consider using Defer.js? +## Why Choose Defer.js -- 🧩 Lazy load almost anything -- 🚀 Dependency-free, no jQuery, amazing fast +- 🧩 Lazy load almost anything with ease +- 🚀 Lightweight and fast, with no dependencies +- 🤝 Effortlessly integrates with your favorite frameworks +- 🔰 Easy to use, even for beginners - ⚡️ Super tiny (minzipped size is around 1KB) -- 🦾 Hardened (over 3 years old and used in many apps) -- 🎯 [Core Web Vitals](https://web.dev/vitals/) friendly -- 🤝 Works well with your favorite frameworks -- 🔰 Very easy to use -- 📱 Smartphone browser friendly -- ✅ Supports legacy browsers (IE9+) - +- 🦾 Optimized for the latest Web Vitals standards +- 📱 Optimized for use on smartphones +- ✅ Supports legacy browsers like Internet Explorer 9 -## Browser support +*Legacy browsers like Internet Explorer 9 require `IntersectionObserver` polyfill. -The library works perfectly on any modern browser. -It also works on legacy browsers like Internet Explorer 9 -* (with `IntersectionObserver` polyfill library). +## Browser Support -- 🖥 IE9+ / Microsoft EDGE +Defer.js is compatible with all modern browsers, including: +- 🖥 IE9+ / Edge - 🖥 Firefox 4+ - 🖥 Safari 3+ - 🖥 Chrome @@ -67,20 +72,21 @@ It also works on legacy browsers like Internet Explorer 9 - 📱 Android 4+ - 📱 iOS 3.2+ - ## Getting started +Defer.js is an easy-to-use library that will help boost your website's performance by reducing loading times. Here's how to get started: + ### Basic -Just put a ` + + @@ -88,16 +94,15 @@ Just put a ` + + @@ -105,8 +110,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin ### Compatibility with older versions -If you have no time to upgrade from an older version, -just use `defer_plus.min.js` instead of `defer.min.js`. +If you're using an older version of Defer.js, you can use `defer_plus.min.js` instead of `defer.min.js`. ```html @@ -114,7 +118,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`. My Awesome Page - + @@ -122,18 +126,13 @@ just use `defer_plus.min.js` instead of `defer.min.js`. ### For OLD browsers (such as IE9) -To take advantage of native performance for legacy browsers (such as IE9) -that don't support `IntersectionObserver` feature, -you should load `IntersectionObserver` polyfill library -right after the `defer.min.js` script tag as the following example: +To enhance performance for legacy browsers that don't support the `IntersectionObserver` feature, you can load the IntersectionObserver polyfill library after the `defer.min.js` script tag. ```html - + - - - + + ``` -*HINT*: Modern browsers support `IntersectionObserver` feature, -so you don't have to be concerned about it if you don't care about IE users. +*NOTE*: Modern browsers support the `IntersectionObserver` feature, so you don't have to worry about adding the polyfill if you don't have legacy browsers in mind. diff --git a/docs/apis.md b/docs/apis.md index a5e14d2..ac85541 100644 --- a/docs/apis.md +++ b/docs/apis.md @@ -539,7 +539,7 @@ he/she will see a message as soon as an element with `id="surprise-me"` appears. ```html ``` @@ -678,7 +678,8 @@ AddThis add-on will not be loaded until the user starts interacting with the pag
+ + @@ -88,16 +94,15 @@ Just put a ` + + @@ -105,8 +110,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin ### Compatibility with older versions -If you have no time to upgrade from an older version, -just use `defer_plus.min.js` instead of `defer.min.js`. +If you're using an older version of Defer.js, you can use `defer_plus.min.js` instead of `defer.min.js`. ```html @@ -114,7 +118,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`. My Awesome Page - + @@ -122,21 +126,16 @@ just use `defer_plus.min.js` instead of `defer.min.js`. ### For OLD browsers (such as IE9) -To take advantage of native performance for legacy browsers (such as IE9) -that don't support `IntersectionObserver` feature, -you should load `IntersectionObserver` polyfill library -right after the `defer.min.js` script tag as the following example: +To enhance performance for legacy browsers that don't support the `IntersectionObserver` feature, you can load the IntersectionObserver polyfill library after the `defer.min.js` script tag. ```html - + - - - + + ``` -*HINT*: Modern browsers support `IntersectionObserver` feature, -so you don't have to be concerned about it if you don't care about IE users. +*NOTE*: Modern browsers support the `IntersectionObserver` feature, so you don't have to worry about adding the polyfill if you don't have legacy browsers in mind. ## Functions * [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ void @@ -678,7 +677,7 @@ he/she will see a message as soon as an element with `id="surprise-me"` appears. ```html ``` @@ -817,7 +816,8 @@ AddThis add-on will not be loaded until the user starts interacting with the pag
* ``` @@ -730,7 +730,8 @@ *
* *