https://github.com/arnellebalane/parcel-plugin-data-src

ParcelJS plugin to bundle resources defined in data-* attributes
https://github.com/arnellebalane/parcel-plugin-data-src

hacktoberfest npm-package parcel parceljs-plugin

Last synced: 3 months ago
JSON representation

ParcelJS plugin to bundle resources defined in data-* attributes

• Host: GitHub
• URL: https://github.com/arnellebalane/parcel-plugin-data-src
• Owner: arnellebalane
• License: mit
• Created: 2018-12-02T03:05:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-17T20:37:26.000Z (over 3 years ago)
• Last Synced: 2024-01-18T15:29:05.704Z (6 months ago)
• Topics: hacktoberfest, npm-package, parcel, parceljs-plugin
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/parcel-plugin-data-src
• Size: 172 KB
• Stars: 9
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: license

Lists

• awesome-parcel - data-src - Bundles resources defined in `data-srcset` and `data-src` HTML attributes. (Plugins / Other)

README

        
# parcel-plugin-data-src

ParcelJS plugin to bundle resources defined in `data-src` and `data-srcset`

attributes.

This is particularly useful when doing lazyloading of images, which doesn't

directly place the image path in the `src` attribute.

## Installation

```bash

$ npm install --save-dev parcel-plugin-data-src

```

## Example

```html

  

  

```

By default, Parcel will only bundle `./images/image-placeholder.jpg` since it's

defined in the `src` attribute.

Using this plugin, the following resosurces that are defined in `data-srcset`

and `data-src` will also be bundled.

- `./images/image-lg.webp`

- `./images/image-md.webp`

- `./images/image-sm.webp`

- `./images/image-lg.jpg`

- `./images/image-md.jpg`

- `./images/image-sm.jpg`

## License

MIT License