ooade / pimg

:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js.

It helps in lazy loading of images in a nice and cool way.

It's 2KB (gzipped).

It has first-class support for Cloudinary Images.

Installation

To install:

npm install --save pimg

Documentation

https://ooade.gitbooks.io/pimg/

Contributions

Feel free to send a PR.

Contributors

Thanks goes to these wonderful people (emoji key):

Ademola Adegbuyi 💻 📖 ⚠️ 💡	Olushi Luqman O. 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

pimg's Issues

Setup Eslint and Prettier

Add Waypoint

Our implementation on ScrollToView is not cool enough, we need something a little bit powerful. We'd need to add react-waypoint as a dev-dependency and ask user to install it if needed. I'm not sure how we can pull this off easily 😅

Should we deprecate the thumbnail component?

I was just thinking, since the Thumbnail component just take in one prop, would it be nice to do away with it and just have it over to Image. We currently have a subtitute:

<Image thumbnail="someThumbURL" />

WDYT?

Accept src as array in place of placeholder

Deprecate placeholder. Maybe? And use src={[imagePlaceholder,image]}.

Deal with service workers

By default, we'll take out serving the mini image if a service worker is found, and activated. But, there will be a prop to ignore this feature

I think the one with the service worker could be checked this way:

if (
   'serviceWoker' in navigator && 
    navigator.serviceWorker.controller && 
    navigator.serviceWorker.controller.state === "activated"
) {
    // do some stuff
}

Add alt support.

Would be super handy to have alt support for the images.

Size is not 20 bytes

Hey there! Neat package. Just wanted to let you know that the package size seems very wrong. If it was actually 20 bytes, that would mean the code literally fits in 20 characters, as each character is one byte. This is obviously impossible.

My guess is that the bundling command errored and you actually measured the length of the error message! 😅

Here's what I get:

$ cat pimg.js | gzip | wc -c
2035

So, roughly 2KB.

Test Preact and Vue Components

Right now we only have tests for React 😓 Having issues with using jest also for Preact as I keep having config clashes. Need help with this. Gracias 🙏

Pre v2: Fix vulnerabilities

npm audit fix --force

With force applied, you might get a breaking change. It's the main reason I made this an issue because I might not have the time currently to fix it.

goodbye thumbnail, welcome placeholder

How about we ditch thumbnail and introduce placeholder? So we can also have placeholderClassName for customizations instead of loadingClassName because the placeholder is just an image to represent the void while we internally fetch the real image
cc @VinSpee / @codeshifu

P.S: With #14 we can just set some sensible defaults 😎 to avoid typing that every single time.

Goodbye scrollToReveal, Welcome fetchOnDemand

I don't think scrollToReveal look lucid enough. I mean, it technically mean scroll to where the image is, then reveal. It might look like the image is already been fetched in the background and just renders once we get to the image position. fetchOnDemand does seem to look like what it should be or not???

WDYT?

Use lerna to manage multiple packages

https://github.com/lerna/lerna

Replace Global Configs with Providers

I think we can achieve this with P(R)eact using the Context Api. Anyone with more vue experience can help implement it on Vue.

Introducing plugins

I'll be creating a new library to take care of placeholders properly so non-cloudinary users that don't have a way of explicitly generating thumbnails can decide to use it or not using our plugin. It'll be a better replacement to the placeholder thumbnails.

tried to set the project up on my windows 10

i ran npm install to set it up an got this error.

>[email protected] minify:cjs C:\Users\setemiojo\Desktop\projects\r\pimg
> uglifyjs $npm_package_main -cm -o $npm_package_main --source-map

ERROR: ENOENT: no such file or directory, open 'C:\Users\setemiojo\Desktop\projects\r\pimg\$npm_package_main'

using git-bash terminal, node v8.12.0 , npm v6.4.0

Allow custom `loading` className

Rather than className__loading, allow for a custom loadingClassname when defined to allow for fine-grained control over CSS

Expose a singleton to save configs

Yay! This would be great. It'd be a nice addition to v1.0.0. By exposing a config, we can do stuffs like toggleDataSaver mode easily or getting the general classNames for the progressive images without having to keep typing this information every single time 😅

Add polyfill for IntersectionObserver API

Intersection Observer API which powers the lazy loading feature might fail in IOS if the polyfill is not added. One thing we could also do to avoid adding a dependency is to use componentDidCatch to catch errors related to this.

I would really love contributions from those using IOS, as I have no IOS devices to help test these features.

Create better docs and examples

The recent release wasn't added to the readme. I feel it's more appropriate to have a doc. Feel free to send in PR's.

Latest Release -> https://github.com/ooade/pimg/releases/tag/v1.0.0-alpha.1
Examples I made -> https://pimg.surge.sh

Demo - Missing

I don't want to be this guy. But, for me as a user who is trying to understand what this package is about and how it works, I just need a demo.

I don't want to "lose" time just by installing it and trying it out.

Thank you :)