Skip to content

arnellebalane/parcel-plugin-data-src

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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

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

Example

<picture>
  <source
    data-srcset="
      ./images/image-lg.webp 1000w,
      ./images/image-md.webp 500w,
      ./images/image-sm.webp 250w"
    sizes="100vw"
    type="image/webp"
  >
  <img
    data-srcset="
      ./images/image-lg.jpg 1000w,
      ./images/image-md.jpg 500w,
      ./images/image-sm.jpg 250w"
    sizes="100vw"
    data-src="./images/image-lg.jpg"
    src="./images/image-placeholder.jpg"
  >
</picture>

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

About

ParcelJS plugin to bundle resources defined in data-* attributes

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published