Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jlengstorf/responsive-lazyload.js
A JavaScript module to lazyload images in a responsive, lightweight way (with fallbacks for unsupported browsers).
https://github.com/jlengstorf/responsive-lazyload.js
css html javascript lazy-load lazy-loading lazyload lazyload-images
Last synced: 19 days ago
JSON representation
A JavaScript module to lazyload images in a responsive, lightweight way (with fallbacks for unsupported browsers).
- Host: GitHub
- URL: https://github.com/jlengstorf/responsive-lazyload.js
- Owner: jlengstorf
- License: isc
- Created: 2016-07-02T17:08:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-26T20:11:50.000Z (over 6 years ago)
- Last Synced: 2024-10-11T13:29:16.350Z (about 1 month ago)
- Topics: css, html, javascript, lazy-load, lazy-loading, lazyload, lazyload-images
- Language: JavaScript
- Homepage: https://jlengstorf.github.io/responsive-lazyload.js/
- Size: 1.54 MB
- Stars: 15
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Lazyload Images Responsively
[](https://travis-ci.org/jlengstorf/responsive-lazyload.js) [](https://codeclimate.com/github/jlengstorf/responsive-lazyload.js) [](https://codeclimate.com/github/jlengstorf/responsive-lazyload.js/coverage)
This package was inspired by . It uses very similar markup, but significantly simplifies the way image replacement is handled under the hood. It also adds an optional fallback for when JavaScript is disabled.
## Quick Start
Check out [the examples](https://git.io/lazyload) for copy-pasteable code and more information about usage.
### Option 1: Using a Build Tool
This example assumes [webpack](https://webpack.github.io/).
#### 1. Install the module using [npm](https://www.npmjs.com/package/responsive-lazyload).
```sh
npm install --save responsive-lazyload
```
#### 2. Include the module and initialize lazyloading.
Load the module and initialize lazyloading in your app's script:
```js
import responsiveLazyload from 'responsive-lazyload';
responsiveLazyload();
```
#### 3. Include the stylesheet.
Include the following in the `` of your document.
```html
```
#### 4. Add a lazyloaded image to your markup.
Place the lazyload markup anywhere in your app's markup:
```html
```
For more information and configuration options, see [the examples](https://jlengstorf.github.io/responsive-lazyload.js/).
### Option 2: Using unpkg
**NOTE:** While unpkg is a fantastic tool, adding additional HTTP requests to your project will slow it down. For that reason, this approach is not recommended.
#### 1. Include the script in your markup.
Just before the closing `` tag, add the lazyloading script:
```html
```
#### 2. Include the styles in your markup.
Include the following in the `` of your document:
```html
```
#### 3. Initialize lazyloading.
The initialization function is stored inside a global object called `responsiveLazyload`. Initialize lazyloading by adding the following just below the script include:
```html
responsiveLazyload();
```
#### 4. Add a lazyloaded image to your markup.
Place the lazyload markup anywhere in your app's markup:
```html
```
For more information and configuration options, see [the examples](https://jlengstorf.github.io/responsive-lazyload.js/).
## Markup
The markup to implement this is:
```html
```
### Markup Details
- The classes can be changed, but must be updated in the call to `responsiveLazyload()`.
- The initial `srcset` is a blank GIF, which avoids an unnecessary HTTP request.
- The _actual_ `srcset` is added as `data-lazyload`.
The way `responsiveLazyload()` works is to check if the image is inside the viewport, and — if so — swap out the `srcset` for the `data-lazyload`. This is much simpler than duplicating browser behavior to choose the optimal image size; instead, we just give the browser a `srcset` and let it do its thing.
On browsers that don’t support `srcset`, the regular `src` attribute is used, so this should degrade gracefully.
### Markup With Fallback for Browsers Without JavaScript Enabled
To ensure that an image is still visible, even if JavaScript is disabled, add a `` block with the properly marked up image using `srcset` without the lazyloading solution:
```html
```
## JavaScript Options
To enable lazyloading, add the following to your initialization script:
```js
import responsiveLazyload from 'responsive-lazyload';
responsiveLazyload({
containerClass: 'js--lazyload',
loadingClass: 'js--lazyload--loading',
callback: () => {},
});
```
option | default | description
---------------- | ----------------------- | -----------------------------------
`containerClass` | `js--lazyload` | Determines which elements are targeted for lazyloading.
`loadingClass` | `js--lazyload--loading` | Applied to containers before loading. This is useful for adding loading animations.
`callback` | `() => {}` | Fired on _each_ image load. Useful for adding custom functionality after an image has loaded.
## Development
To run this module locally for development, follow these steps:
```sh
# Clone the repo.
git clone [email protected]:jlengstorf/responsive-lazyload.js.git
# Move into the repo.
cd responsive-lazyload.js/
# Install dependencies.
npm install
# Run the build script.
npm run build
```
### Testing
Tests are built using [Jest](https://facebook.github.io/jest/). Run them with:
```sh
npm test
# Or, to remove all the extra crap npm spits out and only show test output:
npm test --silent
```