-
-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a0e1c0a
commit 7b71f96
Showing
16 changed files
with
999 additions
and
1,014 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
MIT License | ||
|
||
Copyright (c) 2019-2023 Mai Nhut Tan <[email protected]> | ||
Copyright (c) 2019-2024 Mai Nhut Tan <[email protected]> | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
|
Large diffs are not rendered by default.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 <[email protected]> | ||
- **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 <[email protected]> | ||
- **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. | ||
|
||
--- | ||
|
Oops, something went wrong.