Skip to content

Commit

Permalink
For 3.8.0 (#132)
Browse files Browse the repository at this point in the history
shinsenter authored Apr 2, 2024
1 parent a0e1c0a commit 7b71f96
Showing 16 changed files with 999 additions and 1,014 deletions.
7 changes: 3 additions & 4 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
root = true

[*.js]
[*]
charset = utf-8
indent_size = 2
indent_style = space
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = true
end_of_line = crlf
[*.html]
indent_size = 4
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2019-2023 Mai Nhut Tan <shin@shin.company>
Copyright (c) 2019-2024 Mai Nhut Tan <shin@shin.company>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
407 changes: 198 additions & 209 deletions README.md

Large diffs are not rendered by default.

372 changes: 182 additions & 190 deletions demo/index.html

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/defer.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/defer_plus.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

97 changes: 32 additions & 65 deletions docs/about.md
Original file line number Diff line number Diff line change
@@ -1,87 +1,55 @@
# Package @shinsenter/defer.js
# @shinsenter/defer.js

🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.

[![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)


* * *

> 💡 [View document in other languages](#documentation-in-other-languages)
## 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.7.0
- **Author**: Mai Nhut Tan <shin@shin.company>
- **Copyright**: 2019-2023 SHIN Company <https://code.shin.company/>
- **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)

---

## Document in other languages

> [NEED HELP] Let's make the documentation and examples better together!
Sluggish Big CSS files, slow JavaScript, or bulky media resources can negatively impact your website's Web Vitals, leading to a slow and frustrating user experience. But what if you could seamlessly defer these resources and boost your website's 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)

#### Credits

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.

***
By utilizing Defer.js, you can bid farewell to these issues! With its lazy loading capabilities, dependency-free design, lightning-fast performance, and hard-won experience, Defer.js is the ultimate solution for optimizing your website's Web Vitals. Whether you're using a modern or legacy browser, Defer.js makes it a breeze to enhance your website's user experience with blazing-fast loading times.

## Why Choose Defer.js

- 🧩 Lazy load almost anything with ease
- 🚀 Lightweight and fast, with no dependencies
- 🤝 Effortlessly integrates with your favorite frameworks
- 🧩 Effortlessly lazy load almost anything
- 🔰 Easy to use, even for beginners
- 🚀 Lightweight and blazingly fast, with no dependencies
- ⚡️ Super tiny (minzipped size is around 1KB)
- 🤝 Seamlessly integrates with your favorite frameworks
- 🦾 Optimized for the latest Web Vitals standards
- 📱 Optimized for use on smartphones
- ✅ Supports legacy browsers like Internet Explorer 9
- ✅ Supports legacy browsers like Internet Explorer 9 <sup>[(*)](#browser-support)</sup>

## Contributing

<sup>*Legacy browsers like Internet Explorer 9 require `IntersectionObserver` polyfill.</sup>
[![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)

## Browser Support
- **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
- **Version**: 3.8.0
- **Author**: Mai Nhut Tan <shin@shin.company>
- **Copyright**: 2019-2024 SHIN Company <https://code.shin.company/>
- **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)

Defer.js is compatible with all modern browsers, including:
- 🖥 IE9+ / Edge
- 🖥 Firefox 4+
- 🖥 Safari 3+
- 🖥 Chrome
- 🖥 Opera
- 📱 Android 4+
- 📱 iOS 3.2+
If you find the project useful, please give it a star or consider donating via [PayPal](https://www.paypal.me/shinsenter).
You can also [open a discussion](https://github.com/shinsenter/defer.js/discussions/new/choose) on Github if you have any idea to improve the library.

---
[![Donate via PayPal](https://img.shields.io/badge/Donate-Paypal-blue)](https://www.paypal.me/shinsenter) [![Become a Stargazer](https://img.shields.io/badge/Become-Stargazer-yellow)](https://code.shin.company/defer.js/stargazers) [![Report an issue](https://img.shields.io/badge/New-Discussions-green)](https://code.shin.company/defer.js/discussions/new/choose)

## Known issues
Your support helps maintain and improve these project for the community.

- [Discussion #122](https://code.shin.company/defer.js/discussions/122):
In iOS Safari, the first `click` event may not work when using `Defer.all()` with the `waitForUserAction` argument set to `true` and one of deferred scripts make a DOM change.
I appreciate you respecting my intellectual efforts in creating this library.
If you intend to copy or use ideas from this project, please give proper credit.

---

## Getting started
## 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:

@@ -95,15 +63,15 @@ Add the Defer.js library to your page by including a `<script>` tag just below t
<title>My Awesome Page</title>

<!-- Add Defer.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer.min.js"></script>

<!-- ... -->
</head>
```

### Inlining the library
### Inlining the Library

To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the [defer.min.js](https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/defer.min.js) and replacing the comments in the script tag with its content.
To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the [defer.min.js](https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer.min.js) and replacing the comments in the script tag with its content.

```html
<head>
@@ -117,34 +85,33 @@ To save an HTTP request, you can even inline the entire Defer.js library by copy
</head>
```

### Compatibility with older versions
### Compatibility with Older Versions

If you're using an older version of Defer.js, you can use `defer_plus.min.js` instead of `defer.min.js`.
If you're using Defer.js v1.x, you can use `defer_plus.min.js` instead of `defer.min.js` without wondering about migrations.

```html
<head>
<meta charset="UTF-8" />
<title>My Awesome Page</title>

<!-- Put defer_plus.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/defer_plus.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer_plus.min.js"></script>

<!-- ... -->
</head>
```

### For OLD browsers (such as IE9)
### For OLD Browsers (such as IE9)

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
<script>/* Defer.js content */</script>

<!-- Add the IntersectionObserver Polyfill for legacy browsers -->
<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/polyfill.min.js"><\/script>');</script>
<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/polyfill.min.js"><\/script>');</script>
```

*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.

---

267 changes: 140 additions & 127 deletions docs/apis.md

Large diffs are not rendered by default.

407 changes: 198 additions & 209 deletions docs/index.md

Large diffs are not rendered by default.

30 changes: 0 additions & 30 deletions docs/links.md

This file was deleted.

39 changes: 39 additions & 0 deletions docs/others.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
## Documentation in Other Languages

> [NEED HELP] Let's collaborate to make the documentation and examples even better!
### 日本語 (Japanese)

For our Japanese readers, please refer to these helpful articles:

- [Defer.js Documentation (Japanese Translation) by Ataruchi](https://blog.gadgets-geek.net/2023/02/deferjs-doc-japanese.html)
<!--
20240318: I am temporarily hiding the following URLs because
their websites have advertisements that could potentially deceive users.
- [Article by HeavyPeat](https://www.heavy-peat.com/2022/02/defer.html)
- [Article by Limosuki](https://www.limosuki.com/2022/06/twitter-lazyload-deferjs.html)
-->

> I would like to express warm gratitude to [@Ataruchi](https://twitter.com/Ataruchi), [@HeavyPeat](https://twitter.com/HeavyPeat), and [Limosuki](https://www.limosuki.com/) for their helpful articles in Japanese.
## Browser Support

Defer.js is compatible with all modern browsers, including:
- 🖥 IE9+ / Edge <sup>(*)</sup>
- 🖥 Firefox 4+
- 🖥 Safari 3+
- 🖥 Chrome
- 🖥 Opera
- 📱 Android 4+
- 📱 iOS 3.2+

<sup>(*) Legacy browsers like Internet Explorer 9 require the `IntersectionObserver` polyfill.</sup>

## Known Issues

- [Discussion #122](https://code.shin.company/defer.js/discussions/122):
In iOS Safari, the first `click` event may not work as expected when using `Defer.all()` with the `waitForUserAction` argument set to `true` and one of the deferred scripts makes a DOM change.

---

From Vietnam 🇻🇳 with love.
4 changes: 2 additions & 2 deletions package-lock.json
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "@shinsenter/defer.js",
"title": "Defer.js",
"version": "3.7.0",
"description": "🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.",
"version": "3.8.0",
"description": "🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.",
"homepage": "https://shinsenter.github.io/defer.js/",
"license": "MIT",
"author": {
39 changes: 27 additions & 12 deletions src/defer.js
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@
*
* MIT License
*
* Copyright (c) 2019-2023 Mai Nhut Tan <shin@shin.company>
* Copyright (c) 2019-2024 Mai Nhut Tan <shin@shin.company>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
@@ -34,16 +34,16 @@
* Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
*
* @author Mai Nhut Tan <shin@shin.company>
* @copyright 2019-2023 SHIN Company <https://code.shin.company/>
* @version 3.7.0
* @copyright 2019-2024 SHIN Company <https://code.shin.company/>
* @version 3.8.0
* @license {@link https://code.shin.company/defer.js/blob/master/LICENSE|MIT}
*/

/*!@shinsenter/defer.js@3.7.0*/
/*!@shinsenter/defer.js@3.8.0*/
(function (window, NAMESPACE, VERSION, CONST_UNDEFINED) {

// var NAMESPACE = 'Defer';
// var VERSION = '3.7.0';
// var VERSION = '3.8.0';

/*
|--------------------------------------------------------------------------
@@ -104,7 +104,7 @@

// browser features
var console = window.console;
var document = window.document || window;
var document = window.document;

// variables that hold the state of Defer
var isReady = REGEX_READY.test(document.readyState);
@@ -162,11 +162,25 @@
log(_DEFER_JS_ + ' is initializing...', '#888');

// the heart of the library
function $$(func, delay, lazy) {
function $$(func, delay, lazy, _callee) {
if (isReady) {
fnServe(func, delay);
} else {
lazy = lazy === CONST_UNDEFINED ? $$[META_LAZY] : lazy;
if (lazy > 1) {
_callee = func;

// create a wrapper function for the original function
func = function () {
if (_callee) {
_callee();
_callee = CONST_UNDEFINED;
}
}

fastQueue.push(func, lazy);
}

(lazy ? lazyQueue : fastQueue).push(
func,
// A temporary fix for the issue #121
@@ -231,6 +245,7 @@

if (inject) {
document.head.appendChild(_node);

// debug
debug('A DOM node has been attached.', _node);
}
@@ -336,7 +351,7 @@
var _debug_ = 'Defer.all(' +
(selector || SELECTOR_JS) + ', ' +
(delay || 0) + ', ' +
((lazy === CONST_UNDEFINED ? $$[META_LAZY] : lazy) ? 'true' : 'false') + ')';
(lazy === CONST_UNDEFINED ? $$[META_LAZY] : lazy) + ')';
perf_begin(_debug_);

// executes queued script tags in the order they were queued
@@ -397,7 +412,7 @@
_clone.rel = META_PRELOAD;

// creates and attaches the new node to the document
_fnNewNode(TAG_LINK, _clone, CONST_UNDEFINED, document);
_fnNewNode(TAG_LINK, _clone, CONST_UNDEFINED, window);
}
}

@@ -425,7 +440,7 @@

// attaches the new node to the document
function ___() {
_fnNewNode(TAG_LINK, attributes, onload, document);
_fnNewNode(TAG_LINK, attributes, onload, window);
}

// adds the internal script to the queue
@@ -439,7 +454,7 @@

// attaches the new node to the document
function ___() {
_fnNewNode(TAG_SCRIPT, attributes, onload, document);
_fnNewNode(TAG_SCRIPT, attributes, onload, window);
}

// adds the internal script to the queue
@@ -540,4 +555,4 @@
// unveils the script tags with type="deferjs"
fnDeferScripts();

})(this, 'Defer', '3.7.0');
})(this, 'Defer', '3.8.0');
328 changes: 170 additions & 158 deletions src/docs.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/fallback.js
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
*
* MIT License
*
* Copyright (c) 2019-2023 Mai Nhut Tan <shin@shin.company>
* Copyright (c) 2019-2024 Mai Nhut Tan <shin@shin.company>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal

0 comments on commit 7b71f96

Please sign in to comment.