Skip to content

Commit

Permalink
Merge pull request #86 from shinsenter/develop
Browse files Browse the repository at this point in the history 
v2.4.1
  • Loading branch information
@shinsenter
shinsenter authored Apr 14, 2021
2 parents dc02899 + 813070e commit c94ba4b
Show file tree
Hide file tree
Showing 13 changed files with 712 additions and 706 deletions.
4 changes: 2 additions & 2 deletions .build/.eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@
"id-length": "error",
"id-match": "error",
"implicit-arrow-linebreak": "error",
"indent": "error",
"indent-legacy": "error",
"indent": ["error", 2],
"indent-legacy": "off",
"init-declarations": "off",
"jsx-quotes": "error",
"key-spacing": "error",
Expand Down
2 changes: 1 addition & 1 deletion .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ root = true

[*]
charset = utf-8
indent_size = 4
indent_size = 2
indent_style = space
end_of_line = lf
insert_final_newline = true
Expand Down
30 changes: 15 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
[![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**: 2.4.0
- **Version**: 2.4.1
- **Author**: Mai Nhut Tan <[email protected]>
- **Copyright**: 2021 AppSeeds <https://code.shin.company/>
- **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)
Expand Down Expand Up @@ -90,7 +90,7 @@ or load it from a CDN like below example.
<title>My Awesome Page</title>

<!-- Put defer.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer.min.js"></script>

<!-- To support older browsers such as Internet Explorer 9 -->
<!-- You may want to put IntersectionObserver polyfill right after defer.min.js tag -->
Expand All @@ -111,7 +111,7 @@ instead of `defer.min.js`.

```html
<!-- Put defer_plus.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer_plus.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer_plus.min.js"></script>

<!-- To support older browsers such as Internet Explorer 9 -->
<!-- You may want to put IntersectionObserver polyfill right after defer.min.js tag -->
Expand Down Expand Up @@ -231,14 +231,14 @@ Before:
```html
<script type="text/javascript" src="/path/to/heavy-javascript.js"></script>
<script>
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>
```
After:
```html
<script type="deferjs" src="/path/to/heavy-javascript.js"></script>
<script type="deferjs">
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>
```
**Example**
Expand All @@ -249,7 +249,7 @@ This example uses `type="myjs"` instead of `type="deferjs"`:
```html
<script type="myjs" src="/path/to/heavy-javascript.js"></script>
<script type="myjs">
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>

<!-- Call Defer.all() at the bottom of the `<body>` tag -->
Expand Down Expand Up @@ -345,7 +345,7 @@ you should load `IntersectionObserver` polyfill library
right after the `defer.min.js` script tag as following example:
```html
<!-- Put defer.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer.min.js"></script>

<!-- Put polyfill right after defer.min.js tag -->
<script>'IntersectionObserver'in window||document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"><\/script>');</script>
Expand Down Expand Up @@ -382,8 +382,8 @@ Lazy load background image of a `div` tag.
```html
<style>
#my_div {
width: 300px;
height: 200px;
width: 300px;
height: 200px;
}
</style>

Expand Down Expand Up @@ -420,7 +420,7 @@ Advanced usage: Lazy load with [Intersection observer options](https://developer
<script>
// Preload images within 200% of the current viewport size.
Defer.dom("img.early-lazy", 200, "loaded", null, {
rootMargin: "200%"
rootMargin: "200%"
});
</script>

Expand Down Expand Up @@ -516,9 +516,9 @@ Then when you scroll to any `code` tag, enable code highlighting for it.
var base = 'https://cdn.jsdelivr.net/npm/[email protected]';
Defer.css(base + '/styles/rainbow.css', 'hljs-css', 1000);
Defer.js(base + '/highlight.pack.min.js', 'hljs-js', 1000, function () {
Defer.dom('pre code', 0, 'ide-loaded', function (block) {
hljs.highlightBlock(block);
});
Defer.dom('pre code', 0, 'ide-loaded', function (block) {
hljs.highlightBlock(block);
});
});
```

Expand Down Expand Up @@ -702,15 +702,15 @@ The DOM Node interface

[https://github.com/shinsenter/defer-laravel/](https://github.com/shinsenter/defer-laravel/)

Under development.
🚀 A Laravel package that focuses on minimizing payload size of HTML document and optimizing processing on the browser when rendering the web page.


## Support my activities

[![Donate via Paypal](https://img.shields.io/badge/Donate-Paypal-blue)](https://www.paypal.me/shinsenter)
[![Become a sponsor](https://img.shields.io/badge/Donate-Patreon-orange)](https://www.patreon.com/appseeds)
[![Become a stargazer](https://img.shields.io/badge/Support-Stargazer-yellow)](https://github.com/shinsenter/defer.js/stargazers)
[![Report an issue](https://img.shields.io/badge/Support-Issues-red)](https://github.com/shinsenter/defer.js/issues/new)
[![Report an issue](https://img.shields.io/badge/Support-Issues-green)](https://github.com/shinsenter/defer.js/issues/new)


* * *
Expand Down
2 changes: 1 addition & 1 deletion dist/defer.min.js
View file

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

2 changes: 1 addition & 1 deletion dist/defer_plus.min.js
View file

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

6 changes: 3 additions & 3 deletions docs/about.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
[![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**: 2.4.0
- **Version**: 2.4.1
- **Author**: Mai Nhut Tan <[email protected]>
- **Copyright**: 2021 AppSeeds <https://code.shin.company/>
- **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)
Expand Down Expand Up @@ -90,7 +90,7 @@ or load it from a CDN like below example.
<title>My Awesome Page</title>

<!-- Put defer.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer.min.js"></script>

<!-- To support older browsers such as Internet Explorer 9 -->
<!-- You may want to put IntersectionObserver polyfill right after defer.min.js tag -->
Expand All @@ -111,7 +111,7 @@ instead of `defer.min.js`.

```html
<!-- Put defer_plus.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer_plus.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer_plus.min.js"></script>

<!-- To support older browsers such as Internet Explorer 9 -->
<!-- You may want to put IntersectionObserver polyfill right after defer.min.js tag -->
Expand Down
20 changes: 10 additions & 10 deletions docs/apis.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,14 @@ Before:
```html
<script type="text/javascript" src="/path/to/heavy-javascript.js"></script>
<script>
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>
```
After:
```html
<script type="deferjs" src="/path/to/heavy-javascript.js"></script>
<script type="deferjs">
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>
```
**Example**
Expand All @@ -111,7 +111,7 @@ This example uses `type="myjs"` instead of `type="deferjs"`:
```html
<script type="myjs" src="/path/to/heavy-javascript.js"></script>
<script type="myjs">
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>

<!-- Call Defer.all() at the bottom of the `<body>` tag -->
Expand Down Expand Up @@ -207,7 +207,7 @@ you should load `IntersectionObserver` polyfill library
right after the `defer.min.js` script tag as following example:
```html
<!-- Put defer.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer.min.js"></script>

<!-- Put polyfill right after defer.min.js tag -->
<script>'IntersectionObserver'in window||document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"><\/script>');</script>
Expand Down Expand Up @@ -244,8 +244,8 @@ Lazy load background image of a `div` tag.
```html
<style>
#my_div {
width: 300px;
height: 200px;
width: 300px;
height: 200px;
}
</style>

Expand Down Expand Up @@ -282,7 +282,7 @@ Advanced usage: Lazy load with [Intersection observer options](https://developer
<script>
// Preload images within 200% of the current viewport size.
Defer.dom("img.early-lazy", 200, "loaded", null, {
rootMargin: "200%"
rootMargin: "200%"
});
</script>

Expand Down Expand Up @@ -378,9 +378,9 @@ Then when you scroll to any `code` tag, enable code highlighting for it.
var base = 'https://cdn.jsdelivr.net/npm/[email protected]';
Defer.css(base + '/styles/rainbow.css', 'hljs-css', 1000);
Defer.js(base + '/highlight.pack.min.js', 'hljs-js', 1000, function () {
Defer.dom('pre code', 0, 'ide-loaded', function (block) {
hljs.highlightBlock(block);
});
Defer.dom('pre code', 0, 'ide-loaded', function (block) {
hljs.highlightBlock(block);
});
});
```

Expand Down
30 changes: 15 additions & 15 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
[![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**: 2.4.0
- **Version**: 2.4.1
- **Author**: Mai Nhut Tan <[email protected]>
- **Copyright**: 2021 AppSeeds <https://code.shin.company/>
- **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)
Expand Down Expand Up @@ -90,7 +90,7 @@ or load it from a CDN like below example.
<title>My Awesome Page</title>

<!-- Put defer.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer.min.js"></script>

<!-- To support older browsers such as Internet Explorer 9 -->
<!-- You may want to put IntersectionObserver polyfill right after defer.min.js tag -->
Expand All @@ -111,7 +111,7 @@ instead of `defer.min.js`.

```html
<!-- Put defer_plus.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer_plus.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer_plus.min.js"></script>

<!-- To support older browsers such as Internet Explorer 9 -->
<!-- You may want to put IntersectionObserver polyfill right after defer.min.js tag -->
Expand Down Expand Up @@ -231,14 +231,14 @@ Before:
```html
<script type="text/javascript" src="/path/to/heavy-javascript.js"></script>
<script>
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>
```
After:
```html
<script type="deferjs" src="/path/to/heavy-javascript.js"></script>
<script type="deferjs">
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>
```
**Example**
Expand All @@ -249,7 +249,7 @@ This example uses `type="myjs"` instead of `type="deferjs"`:
```html
<script type="myjs" src="/path/to/heavy-javascript.js"></script>
<script type="myjs">
// Some heavy DOM manipulations here
// Some heavy DOM manipulations here
</script>

<!-- Call Defer.all() at the bottom of the `<body>` tag -->
Expand Down Expand Up @@ -345,7 +345,7 @@ you should load `IntersectionObserver` polyfill library
right after the `defer.min.js` script tag as following example:
```html
<!-- Put defer.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].1/dist/defer.min.js"></script>

<!-- Put polyfill right after defer.min.js tag -->
<script>'IntersectionObserver'in window||document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"><\/script>');</script>
Expand Down Expand Up @@ -382,8 +382,8 @@ Lazy load background image of a `div` tag.
```html
<style>
#my_div {
width: 300px;
height: 200px;
width: 300px;
height: 200px;
}
</style>

Expand Down Expand Up @@ -420,7 +420,7 @@ Advanced usage: Lazy load with [Intersection observer options](https://developer
<script>
// Preload images within 200% of the current viewport size.
Defer.dom("img.early-lazy", 200, "loaded", null, {
rootMargin: "200%"
rootMargin: "200%"
});
</script>

Expand Down Expand Up @@ -516,9 +516,9 @@ Then when you scroll to any `code` tag, enable code highlighting for it.
var base = 'https://cdn.jsdelivr.net/npm/[email protected]';
Defer.css(base + '/styles/rainbow.css', 'hljs-css', 1000);
Defer.js(base + '/highlight.pack.min.js', 'hljs-js', 1000, function () {
Defer.dom('pre code', 0, 'ide-loaded', function (block) {
hljs.highlightBlock(block);
});
Defer.dom('pre code', 0, 'ide-loaded', function (block) {
hljs.highlightBlock(block);
});
});
```

Expand Down Expand Up @@ -702,15 +702,15 @@ The DOM Node interface

[https://github.com/shinsenter/defer-laravel/](https://github.com/shinsenter/defer-laravel/)

Under development.
🚀 A Laravel package that focuses on minimizing payload size of HTML document and optimizing processing on the browser when rendering the web page.


## Support my activities

[![Donate via Paypal](https://img.shields.io/badge/Donate-Paypal-blue)](https://www.paypal.me/shinsenter)
[![Become a sponsor](https://img.shields.io/badge/Donate-Patreon-orange)](https://www.patreon.com/appseeds)
[![Become a stargazer](https://img.shields.io/badge/Support-Stargazer-yellow)](https://github.com/shinsenter/defer.js/stargazers)
[![Report an issue](https://img.shields.io/badge/Support-Issues-red)](https://github.com/shinsenter/defer.js/issues/new)
[![Report an issue](https://img.shields.io/badge/Support-Issues-green)](https://github.com/shinsenter/defer.js/issues/new)


* * *
Expand Down
Loading

0 comments on commit c94ba4b

Please sign in to comment.