Skip to content

Commit 9668e64

Browse files
shinsentershinsenter
authored
Merge pull request #71 from shinsenter/v2.0
Published v2.0.0
2 parents 16d09ff + a97b5fc commit 9668e64

15 files changed

+128
-956
lines changed

Diff for: ‎README.md

+33-34
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
[![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/shinsenter/defer.js)](https://www.codefactor.io/repository/github/shinsenter/defer.js)
88

99
* * *
10+
1011
[![GitHub Release Date](https://img.shields.io/github/release-date/shinsenter/defer.js)](https://github.com/shinsenter/defer.js/releases)
1112
[![GitHub package.json version](https://img.shields.io/github/package-json/v/shinsenter/defer.js)](https://github.com/shinsenter/defer.js/releases)
1213
[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@shinsenter/defer.js)](https://www.npmjs.com/package/@shinsenter/defer.js)
@@ -20,7 +21,6 @@
2021
- **Copyright**: 2021 AppSeeds <https://code.shin.company/>
2122
- **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)
2223

23-
2424
* * *
2525

2626

@@ -46,13 +46,13 @@ Furthermore [defer.js](#Defer) also gives you very simple ways
4646
to flexibly optimize other resources in your website.
4747

4848

49-
## Key features
49+
## Good points
5050

5151
- 🧶 Under 1KB (gzipped)
5252
- 🎯 No dependencies, no jQuery
5353
- ⚡️ Native API, blazing fast
54-
- ✅ Legacy browsers support (IE9+)
55-
- 🧩 Lazy load almost everything
54+
- ✅ Supports legacy browsers (IE9+)
55+
- 🧩 Lazy loading for almost everything
5656
- 👍 Very easy to use
5757
- 🤝 Works well with your favorite frameworks
5858

@@ -61,7 +61,7 @@ to flexibly optimize other resources in your website.
6161

6262
Available in latest browsers,
6363
also works perfectly with Internet Explorer 9
64-
<sup title="With including `IntersectionObserver` polyfill library">*</sup> and later.
64+
<sup>* (with `IntersectionObserver` polyfill library)</sup<> and later.
6565

6666
- 🖥 IE9+ / Microsoft EDGE *
6767
- 🖥 Firefox 4+
@@ -85,14 +85,13 @@ just below the opening `<head>` tag:
8585
<title>My Awesome Page</title>
8686

8787
<!-- Put defer.min.js here -->
88-
<script src="defer.js/dist/defer.min.js"></script>
89-
<!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer.min.js -->
88+
<script src="defer.js@2.0.0/dist/defer.min.js"></script>
89+
<!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.0.0/dist/defer.min.js -->
9090

9191
<!-- ... -->
9292
</head>
9393
```
9494

95-
9695
### Compatibility with previous releases
9796

9897
I strongly recommend that you should migrate
@@ -104,8 +103,8 @@ instead of `defer.min.js`.
104103

105104
```html
106105
<!-- Put defer_plus.min.js here -->
107-
<script src="defer.js/dist/defer_plus.min.js"></script>
108-
<!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer_plus.min.js -->
106+
<script src="defer.js@2.0.0/dist/defer_plus.min.js"></script>
107+
<!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.0.0/dist/defer_plus.min.js -->
109108
```
110109

111110
### Inlining the library
@@ -140,9 +139,9 @@ to minimize the number of requests.
140139

141140
## Typedefs
142141

143-
* [Node](#Node)
144142
* [function](#function) ⇒ <code>void</code>
145143
* [closure](#closure) ⇒ <code>void</code> \| <code>bool</code>
144+
* [Node](#Node)
146145

147146
<a name="Defer"></a>
148147

@@ -394,9 +393,9 @@ Then it will add a CSS class `loaded` to the fully lazy loaded image element.
394393

395394
<!-- Here may be a very long content -->
396395

397-
<img class="lazy-extra" alt="Photo 1" data-src="https://picsum.photos/200/300?random=1" width="200" height="300" />
398-
<img class="lazy-extra" alt="Photo 2" data-src="https://picsum.photos/200/300?random=2" width="200" height="300" />
399-
<img class="lazy-extra" alt="Photo 3" data-src="https://picsum.photos/200/300?random=3" width="200" height="300" />
396+
<img class="lazy-extra" alt="Photo 1" data-src="https://picsum.photos/200/300?random=4" width="200" height="300" />
397+
<img class="lazy-extra" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
398+
<img class="lazy-extra" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
400399
```
401400
**Example**
402401
Advanced usage: Lazy load with [Intersection observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)
@@ -411,9 +410,9 @@ Advanced usage: Lazy load with [Intersection observer options](https://developer
411410

412411
<!-- Here may be a very long content -->
413412

414-
<img class="lazy-sooner" alt="Photo 1" data-src="https://picsum.photos/200/300?random=1" width="200" height="300" />
415-
<img class="lazy-sooner" alt="Photo 2" data-src="https://picsum.photos/200/300?random=2" width="200" height="300" />
416-
<img class="lazy-sooner" alt="Photo 3" data-src="https://picsum.photos/200/300?random=3" width="200" height="300" />
413+
<img class="lazy-sooner" alt="Photo 1" data-src="https://picsum.photos/200/300?random=7" width="200" height="300" />
414+
<img class="lazy-sooner" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
415+
<img class="lazy-sooner" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
417416
```
418417
**Example**
419418
We can use CSS class that added to the lazy loaded element
@@ -434,9 +433,9 @@ to add animation to the successfully loaded elements.
434433

435434
<!-- Here may be a very long content -->
436435

437-
<img class="fade" alt="Photo 1" data-src="https://picsum.photos/200/300?random=1" width="200" height="300" />
438-
<img class="fade" alt="Photo 2" data-src="https://picsum.photos/200/300?random=2" width="200" height="300" />
439-
<img class="fade" alt="Photo 3" data-src="https://picsum.photos/200/300?random=3" width="200" height="300" />
436+
<img class="fade" alt="Photo 1" data-src="https://picsum.photos/200/300?random=10" width="200" height="300" />
437+
<img class="fade" alt="Photo 2" data-src="https://picsum.photos/200/300?random=11" width="200" height="300" />
438+
<img class="fade" alt="Photo 3" data-src="https://picsum.photos/200/300?random=12" width="200" height="300" />
440439
```
441440
**Example**
442441
This function can be used similarly for other tags
@@ -476,19 +475,19 @@ such as `<iframe>`, `<video>`, `<audio>`, `<picture>` tags.
476475
```
477476
**Example**
478477
Or even execute a piece of JavaScript
479-
when the user scrolls to the element `#my_div`.
478+
when the user scrolls to the element `#scroll_reveal`.
480479

481480
```html
482481
<script>
483-
// Show an alert when user scrolled to #my_div
484-
Defer.dom('#my_div', null, null, function(element) {
482+
// Show an alert when user scrolled to #scroll_reveal
483+
Defer.dom('#scroll_reveal', null, null, function(element) {
485484
window.alert('You scrolled to #' + element.id);
486485
});
487486
</script>
488487

489488
<!-- Here may be a very long content -->
490489

491-
<div id="my_div">
490+
<div id="scroll_reveal">
492491
This is my content.
493492
</div>
494493
```
@@ -586,16 +585,6 @@ Defer.js(base + '/highlight.pack.min.js', 'hljs-js', 1000, function () {
586585
| [observeOptions] | <code>object</code> |
587586

588587

589-
* * *
590-
591-
<a name="Node"></a>
592-
593-
## Node
594-
The DOM Node interface
595-
596-
**Kind**: global typedef
597-
**See**: [https://developer.mozilla.org/en-US/docs/Web/API/Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)
598-
599588
* * *
600589

601590
<a name="function"></a>
@@ -620,6 +609,16 @@ The definition for a function that takes one parameter is a DOM [Node](#Node) el
620609
| element | [<code>Node</code>](#Node) | The DOM [Node](#Node) element |
621610

622611

612+
* * *
613+
614+
<a name="Node"></a>
615+
616+
## Node
617+
The DOM Node interface
618+
619+
**Kind**: global typedef
620+
**See**: [https://developer.mozilla.org/en-US/docs/Web/API/Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)
621+
623622
* * *
624623

625624
## Defer.js for another platforms

Diff for: ‎demo/assets/defer-script.jpg

-105 KB
Binary file not shown.

Diff for: ‎demo/assets/demo.jpg

-41.9 KB
Binary file not shown.

Diff for: ‎demo/assets/scores.jpg

-37.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)