From d61cd432977028325fe3a99624d60339911a5611 Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 2 Jul 2023 16:39:44 +0300
Subject: [PATCH 001/185] Feature: Lazy bg option
---
README.md | 25 +++++-----------
src/lazy.js | 86 +++++++++++++++++++++++++++++++++++++++++------------
2 files changed, 75 insertions(+), 36 deletions(-)
diff --git a/README.md b/README.md
index baf3eeb..c3129d1 100644
--- a/README.md
+++ b/README.md
@@ -4,32 +4,23 @@ Lazy Load Images is a JavaScript utility that allows you to lazy load visual con
## Usage
-To use Lazy Load Images, include the `lazyLoadImages` function in your JavaScript code. The function takes two optional parameters:
+To use Lazy Load Images, include the `lazyLoad` function in your JavaScript code. The function takes two optional parameters:
-- `selector` (string, default: '[lazy]'): CSS selector for lazy load items.
-- `options` (object): IntersectionObserver options.
+- `selector` (string, default: 'lazy'): CSS selector for lazy load items.
+- `observerOptions` (object): Options for the Intersection Observer.
-If no selector is provided, the default selector '[lazy]' will be used.
-If no options are provided, default options will be used.
-
-```html
-
-
-```
+If no selector is provided, the default selector 'lazy' will be used.
+If no observer options are provided, default options will be used.
```javascript
-lazyLoad();
-
-// Or
-
-lazyLoad('[lazy]', {
+lazyLoad('lazy', {
root: null,
threshold: 1,
rootMargin: '300px 0px',
});
```
-The lazy load functionality will be applied to all elements that match the given selector. When an element approaches the visible area of the screen, its 'lazy' attribute will be used as the source for the 'src' attribute, and the element will be marked as loaded by adding the '-loaded' class.
+The lazy load functionality will be applied to all elements that match the specified selector. When an element comes into view, its 'lazy' attribute will be used as the source for the 'src' attribute, and the element will be marked as loaded by adding the '-loaded' class.
## Developer
@@ -37,4 +28,4 @@ The lazy load functionality will be applied to all elements that match the given
## License
-[MIT](https://choosealicense.com/licenses/mit/)
+[MIT License](https://choosealicense.com/licenses/mit/).
diff --git a/src/lazy.js b/src/lazy.js
index a915ff2..7f85055 100644
--- a/src/lazy.js
+++ b/src/lazy.js
@@ -1,36 +1,84 @@
/**
- * Lazy loads visual content when it approaches
- * the visible area of the screen to increase
- * page loading speed.
+ * Lazily loads assets based on intersection observer.
*
- * @param {string} [selector='[lazy]'] - CSS selector for lazy load items.
- * @param {Object} [options] - IntersectionObserver options.
+ * @param {string} [selector='lazy'] - Selector for lazy load elements.
+ * @param {IntersectionObserverInit} [observerOptions={
+ * root: null,
+ * threshold: 1,
+ * rootMargin: '300px 0px',
+ * }] - Options for the intersection observer.
*/
-const lazyLoad = (selector = '[lazy]', options = {}) => {
- const lazyLoadItems = document.querySelectorAll(selector);
-
- const defaultOptions = {
+const lazyLoad = (
+ selector = 'lazy',
+ observerOptions = {
root: null,
threshold: 1,
rootMargin: '300px 0px',
+ }
+) => {
+ /**
+ * Options for lazy loading.
+ *
+ * @type {object}
+ *
+ * @property {string} tag - Attribute name for lazy load elements.
+ * @property {string} backgroundImage - Attribute name for lazy load elements with background image.
+ * @property {string} loaded - Class name to add when the asset is loaded.
+ */
+ const options = {
+ tag: selector,
+ backgroundImage: `${selector}-bg`,
+ loaded: '-loaded',
};
- const mergedOptions = { ...defaultOptions, ...options };
+ /**
+ * Loads the asset for the given element.
+ *
+ * @param {HTMLElement} element - The element to load the asset for.
+ */
+ const loadAsset = (element) => {
+ const assetPath = element.getAttribute(options.tag);
+
+ if (!assetPath) return;
+
+ if (element.hasAttribute(options.backgroundImage)) {
+ element.style.backgroundImage = `url(${assetPath})`;
+ element.removeAttribute(options.backgroundImage);
+ } else {
+ element.setAttribute('src', assetPath);
+ }
+
+ element.classList.add(options.loaded);
+ element.removeAttribute(options.tag);
+ };
- const observer = new IntersectionObserver((entries, observer) => {
+ /**
+ * Handles the intersection of lazy load elements.
+ *
+ * @param {IntersectionObserverEntry[]} entries - The entries for the intersection observer.
+ * @param {IntersectionObserver} observer - The intersection observer instance.
+ */
+ const handleIntersection = (entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
- const target = entry.target;
- const value = target.getAttribute('lazy');
+ loadAsset(entry.target);
+ observer.unobserve(entry.target);
+ });
+ };
- target.classList.add('-loaded');
- target.removeAttribute('lazy');
- target.setAttribute('src', value);
+ const observer = new IntersectionObserver(
+ handleIntersection,
+ observerOptions
+ );
- observer.unobserve(target);
- });
- }, mergedOptions);
+ /**
+ * Select 'selector' which is not empty.
+ * `[lazy]:not([lazy=''])`
+ */
+ const lazyLoadItems = document.querySelectorAll(
+ `[${options.tag}]:not([${options.tag}=''])`
+ );
lazyLoadItems.forEach((item) => observer.observe(item));
};
From 6a1716fc5610dcc704e49f4e486bc73716f84aac Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:55:54 +0300
Subject: [PATCH 002/185] Delete: Developer section
---
README.md | 4 ----
1 file changed, 4 deletions(-)
diff --git a/README.md b/README.md
index c3129d1..ab3d5d8 100644
--- a/README.md
+++ b/README.md
@@ -22,10 +22,6 @@ lazyLoad('lazy', {
The lazy load functionality will be applied to all elements that match the specified selector. When an element comes into view, its 'lazy' attribute will be used as the source for the 'src' attribute, and the element will be marked as loaded by adding the '-loaded' class.
-## Developer
-
-[@drementer](https://github.com/drementer)
-
## License
[MIT License](https://choosealicense.com/licenses/mit/).
From 022048fb5dbe926d0d178b560ae5b394eafb807d Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:56:54 +0300
Subject: [PATCH 003/185] Delete: Unused script
---
package.json | 3 ---
1 file changed, 3 deletions(-)
diff --git a/package.json b/package.json
index 1c4e759..0713efc 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,6 @@
"version": "1.0.5",
"homepage": "https://github.com/drementer/lazy-load.js",
"description": "Loads visual content when it approaches the visible area of the screen to increase page loading speed.",
- "scripts": {
- "build": "parcel build src/lazy.js --dist-dir dist --no-source-maps"
- },
"keywords": [
"js",
"lazy",
From cfd1ef393b9168afb4363758f4a5b623dcf9c85f Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:57:13 +0300
Subject: [PATCH 004/185] Update: Version
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 0713efc..c5f36c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "lazy-load.js",
- "version": "1.0.5",
+ "version": "1.0.6",
"homepage": "https://github.com/drementer/lazy-load.js",
"description": "Loads visual content when it approaches the visible area of the screen to increase page loading speed.",
"keywords": [
From 2068b264ac5cbe0fe870fdeda5023579e1bdd80c Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:57:39 +0300
Subject: [PATCH 005/185] Add: Source and main
---
package.json | 2 ++
1 file changed, 2 insertions(+)
diff --git a/package.json b/package.json
index c5f36c3..651f1b5 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
"version": "1.0.6",
"homepage": "https://github.com/drementer/lazy-load.js",
"description": "Loads visual content when it approaches the visible area of the screen to increase page loading speed.",
+ "source": "src/index.js",
+ "main": "src/index.js",
"keywords": [
"js",
"lazy",
From 68b44059ca951974f757065093fa28a994163253 Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:58:16 +0300
Subject: [PATCH 006/185] Update: Package info order
---
package.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/package.json b/package.json
index 651f1b5..8baf1be 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,12 @@
"lazy-load.js"
],
"author": "drementer (https://github.com/drementer)",
- "license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/drementer/lazy-load.js.git"
},
"bugs": {
"url": "https://github.com/drementer/lazy-load.js/issues"
- }
+ },
+ "license": "MIT"
}
From ab60e7f2631184655f88fc7b19824e9082197336 Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:58:45 +0300
Subject: [PATCH 007/185] Refactor: Prettier
---
package.json | 40 ++++++++++++++++++++--------------------
1 file changed, 20 insertions(+), 20 deletions(-)
diff --git a/package.json b/package.json
index 8baf1be..3e31672 100644
--- a/package.json
+++ b/package.json
@@ -1,23 +1,23 @@
{
- "name": "lazy-load.js",
- "version": "1.0.6",
- "homepage": "https://github.com/drementer/lazy-load.js",
- "description": "Loads visual content when it approaches the visible area of the screen to increase page loading speed.",
- "source": "src/index.js",
+ "name": "lazy-load.js",
+ "version": "1.0.6",
+ "homepage": "https://github.com/drementer/lazy-load.js",
+ "description": "Loads visual content when it approaches the visible area of the screen to increase page loading speed.",
+ "source": "src/index.js",
"main": "src/index.js",
- "keywords": [
- "js",
- "lazy",
- "lazy load",
- "lazy-load.js"
- ],
- "author": "drementer (https://github.com/drementer)",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/drementer/lazy-load.js.git"
- },
- "bugs": {
- "url": "https://github.com/drementer/lazy-load.js/issues"
- },
- "license": "MIT"
+ "keywords": [
+ "js",
+ "lazy",
+ "lazy load",
+ "lazy-load.js"
+ ],
+ "author": "drementer (https://github.com/drementer)",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/drementer/lazy-load.js.git"
+ },
+ "bugs": {
+ "url": "https://github.com/drementer/lazy-load.js/issues"
+ },
+ "license": "MIT"
}
From 69249db3d1710bd324065ebf36a4e6151cb9137b Mon Sep 17 00:00:00 2001
From: drementer <48869708+drementer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:59:00 +0300
Subject: [PATCH 008/185] Update: File name
---
src/{lazy.js => index.js} | 10 +++++-----
test/index.html | 2 +-
2 files changed, 6 insertions(+), 6 deletions(-)
rename src/{lazy.js => index.js} (96%)
diff --git a/src/lazy.js b/src/index.js
similarity index 96%
rename from src/lazy.js
rename to src/index.js
index 7f85055..1d15cf6 100644
--- a/src/lazy.js
+++ b/src/index.js
@@ -72,13 +72,13 @@ const lazyLoad = (
observerOptions
);
- /**
- * Select 'selector' which is not empty.
- * `[lazy]:not([lazy=''])`
- */
+ /**
+ * Select 'selector' which is not empty.
+ * `[lazy]:not([lazy=''])`
+ */
const lazyLoadItems = document.querySelectorAll(
`[${options.tag}]:not([${options.tag}=''])`
);
lazyLoadItems.forEach((item) => observer.observe(item));
-};
+};
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index bc53a52..3631246 100644
--- a/test/index.html
+++ b/test/index.html
@@ -39,7 +39,7 @@
-
+