-```
-
-With this in place, users won't look at the empty place when image is loading.
-
-### Step by Step Guide
-To use this feature, you'll need small versions of your images which will be loaded right away when the page loads. Let's say I have 2 same images with different sizes:
-
-
-
-I want to load a small image on the initial page load, and when person scrolls into the image view, the bigger version will be loaded and it will replace the small one. In my HTML I will simply add an `src` attribute with path to a small image.
-
-```html
-
-```
-
-:::warning Important
-It's important to add `width` and `height` attributes or have width and hight setup correctly with CSS. Because small image has to be filling all the space that large image is taking. Additionally, adding `width`, `height`, and `alt` attributes to the image is a good practice for SEO.
-:::
-
-Instead of the small version of your image you can use any other small image, like a placeholder or a blurred image. It's up to you.
diff --git a/docs/get-started.md b/docs/get-started.md
deleted file mode 100644
index 04e5442..0000000
--- a/docs/get-started.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-outline: deep
-title: Get Started - Smooth Loader
-description: Smooth Loader enables seamless lazy loading of images and background images. Learn how to use it and improve your website's performance
----
-
-# Documentation
-
-## Introduction
-Smooth Loader enables seamless lazy loading of images and background images. Lazy Loading postpones the loading of images that aren't immediately visible on the page. Images outside the user's viewport are loaded only when the user scrolls and they come into view. If the user doesn't scroll, those images are never loaded, saving bandwidth and improving page performance.
-
-This package is an essential tool for any website with multiple images, offering high configurability and performance. Smooth Loader is arguably the best lazy loading package on NPM, tailored to fit your needs.
-
-## Features
-- 😍 Comprehensive documentation
-- 😍 Built with TypeScript
-- 😍 Lightweight and efficient
-- 😍 Supports both `img` tags and background images
-- 😍 Smooth fade-in animation for image loading
-- 😍 Displays a low-resolution image preview during the initial page load for image elements
-- 😍 Fully configurable to suit your requirements
-
-### When to Use?
-Image Preview feature is useful in the following cases:
-
-- When you have a lot of images on the page and you want to improve the user experience
-- When users have a slow internet connection and images are loading slowly
-- When you have few images on the page but they are heavy and take time to load
-- When you have GIFs on the page that are loading slowly
-
-## Quick Start
-To install Smooth Loader you need to follow these steps:
-
-### Install with NPM
-```bash
-npm i smooth-loader
-```
-
-### Install with Yarn
-```bash
-yarn add smooth-loader
-```
-
-### Install with Ban
-```bash
-ban add smooth-loader
-```
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index 0a3965d..0000000
--- a/docs/index.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: home
-
-hero:
- name: Smooth Loader
- text: "Fast and lightweight"
- tagline: Impressive JavaScript lazy loading for images
- actions:
- - theme: brand
- text: Get Started →
- link: /get-started
- - theme: alt
- text: Try it
- link: https://codesandbox.io/s/smooth-loader-example-usage-5xr6h
- image:
- src: /images/logo.png
- alt: Smooth Loader Logo
-
-features:
- - title: Written in TypeScript
- details: Package is fully written with TypeScript.
- icon: 🦄
- - title: Image Preview
- details: For image elements, you can show minified version of the image on initial page load.
- icon: 🏙
- - title: Smooth Load
- details: Loads images with a smooth fade out animation.
- icon: ⛸
----
diff --git a/docs/usage-guide.md b/docs/usage-guide.md
deleted file mode 100644
index 90d583e..0000000
--- a/docs/usage-guide.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-outline: deep
-title: Usage Guide - Smooth Loader
-description: Learn how to use Smooth Loader to lazy load images and background images on your website
----
-
-# Usage Guide
-Smooth Loader makes it simple to enable lazy loading for image elements and background images, improving page performance by only loading images when they become visible in the viewport. Follow these steps to get started:
-
-1. Replace the standard `src` attribute of your image elements with the `data-src` attribute. The `data-src` attribute should contain the URL of the image you want to lazy load. This ensures the image isn't loaded immediately when the page loads.
-2. Import the Smooth Loader package and call the `smoothLoader()` function in your JavaScript file. This function scans your DOM for elements with lazy load configurations and applies the lazy loading logic.
-
-## Using the Default Selector
-This selects all images with the `smooth-loader` class by default.
-
-```js
-import smoothLoader from 'smooth-loader'
-
-smoothLoader()
-```
-
-By default, it will select all images with `smooth-loader` class.
-
-## Using a Custom Class
-Specify a custom class to select images, such as `lazy-image`.
-
-```js
-import smoothLoader from 'smooth-loader'
-
-smoothLoader('.lazy-image')
-```
-
-## Selecting Multiple Elements
-Use the `querySelectorAll` method to target multiple images for lazy loading
-
-```js
-import smoothLoader from 'smooth-loader'
-
-const images = document.querySelectorAll
-
-
-
-```
\ No newline at end of file
diff --git a/get-started.html b/get-started.html
new file mode 100644
index 0000000..601eb7e
--- /dev/null
+++ b/get-started.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ 
🦄
Written in TypeScript
Package is fully written with TypeScript.
Configurations
As the second argument to the smoothLoader function, you can pass optional configurations. Some of the configurations extend Intersection Observer API, which is a native browser API that is used under the hood.
typescript
smoothLoader('.lazy-image', {
+ root: document.querySelector('#scrollArea'),
+ rootMargin: '0px',
+ threshold: 1.0,
+})Available Configurations
| Parameter | Type | Description |
|---|---|---|
root | Element | The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null. |
rootMargin | string | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros. |
threshold | number or number[] | Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even one pixel is visible, the callback will be run). A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. |
Image Preview
One of the key features of Smooth Loader is its image preview capability. This feature allows a low-resolution version of the image to load initially, ensuring faster page load times and a better user experience.
Once the user scrolls the image into view, the high-resolution version is seamlessly loaded, replacing the preview without any noticeable delay.
This approach not only enhances the visual appearance of your website but also improves performance, particularly for image-heavy pages.
Works Only for Image Elements
This feature works only for image elements, background images are not supported yet.
Real-World Example
Below is an example from a production-ready website utilizing the Smooth Loader package to deliver an optimized and smooth image loading experience:
You can check it out here yourself, just don't forget to set the network speed to "Slow 3G" in the browser's developer tools.
The small version of the image can be added to an src attribute on the image element and the bigger version to a data-src attribute like this:
html
<img src="/path/me-min.jpeg" data-src="/path/me.jpeg">With this in place, users won't look at the empty place when image is loading.
Step by Step Guide
To use this feature, you'll need small versions of your images which will be loaded right away when the page loads. Let's say I have 2 same images with different sizes:
I want to load a small image on the initial page load, and when person scrolls into the image view, the bigger version will be loaded and it will replace the small one. In my HTML I will simply add an src attribute with path to a small image.
html
<img
+ alt="Beautiful girl"
+ class="smooth-loader"
+ src="images/1min.jpg"
+ data-src="images/1.jpg"
+ width="736"
+ height="725"
+/>Important
It's important to add width and height attributes or have width and hight setup correctly with CSS. Because small image has to be filling all the space that large image is taking. Additionally, adding width, height, and alt attributes to the image is a good practice for SEO.
Instead of the small version of your image you can use any other small image, like a placeholder or a blurred image. It's up to you.