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

Overview

pimg logo

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.

build status npm version npm downloads

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

Comments
  • tried to set the project up on my windows 10

    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

    bug help wanted Hacktoberfest 
    opened by Oluwasetemi 18
  • Pre v2: Fix vulnerabilities

    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.

    Hacktoberfest 
    opened by ooade 4
  • Demo - Missing

    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 :)

    opened by pmochine 3
  • Deal with service workers

    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
    }
    
    v2 
    opened by ooade 3
  • Add Waypoint

    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 :sweat_smile:

    opened by ooade 3
  • Handle placeholder generation

    Handle placeholder generation

    What does this PR do?

    Fixes a bug where a placeholder is being generated for wrong src assumed to be a Cloudinary image.

    How to test this PR?

    /*
    * Before
    * Given an image with src other than Cloudinary
    * https://cdn.pexels.com/upload/2012/02/10/cloudinary__340.jpg
    */
    if (src && src.includes('cloudinary')) { // matches
      ...
    }
    

    As stated in Cloudinary documentation here, the best way to test if the image is from Cloudinary is to check in the host

    /*
    * After
    * Given an image with src other than Cloudinary
    * https://cdn.pexels.com/upload/2012/02/10/cloudinary__340.jpg
    */
    try {
      const srcURL = new URL(src)
      if (srcURL.host.includes('cloudinary')) { // does not match
        ...
      }
    } catch(err) {}
    
    opened by codeshifu 2
  • Bump handlebars from 4.0.12 to 4.5.3

    Bump handlebars from 4.0.12 to 4.5.3

    Bumps handlebars from 4.0.12 to 4.5.3.

    Changelog

    Sourced from handlebars's changelog.

    v4.5.3 - November 18th, 2019

    Bugfixes:

    • fix: add "no-prototype-builtins" eslint-rule and fix all occurences - f7f05d7
    • fix: add more properties required to be enumerable - 1988878

    Chores / Build:

    • fix: use !== 0 instead of != 0 - c02b05f
    • add chai and dirty-chai and sinon, for cleaner test-assertions and spies, deprecate old assertion-methods - 93e284e, 886ba86, 0817dad, 93516a0

    Security:

    • The properties __proto__, __defineGetter__, __defineSetter__ and __lookupGetter__ have been added to the list of "properties that must be enumerable". If a property by that name is found and not enumerable on its parent, it will silently evaluate to undefined. This is done in both the compiled template and the "lookup"-helper. This will prevent new Remote-Code-Execution exploits that have been published recently.

    Compatibility notes:

    • Due to the security-fixes. The semantics of the templates using __proto__, __defineGetter__, __defineSetter__ and __lookupGetter__ in the respect that those expression now return undefined rather than their actual value from the proto.
    • The semantics have not changed in cases where the properties are enumerable, as in:
    {
      __proto__: 'some string'
    }
    
    • The change may be breaking in that respect, but we still only increase the patch-version, because the incompatible use-cases are not intended, undocumented and far less important than fixing Remote-Code-Execution exploits on existing systems.

    Commits

    v4.5.2 - November 13th, 2019

    Bugfixes

    • fix: use String(field) in lookup when checking for "constructor" - d541378
    • test: add fluent API for testing Handlebars - c2ac79c

    Compatibility notes:

    • no incompatibility are to be expected
    ... (truncated)
    Commits
    • c819c8b v4.5.3
    • 827c9d0 Update release notes
    • f7f05d7 fix: add "no-prototype-builtins" eslint-rule and fix all occurences
    • 1988878 fix: add more properties required to be enumerable
    • 886ba86 test/chore: add chai/expect and sinon to "runtime"-environment
    • 0817dad test: add sinon as global variable to eslint in the specs
    • 93516a0 test: add sinon.js for spies, deprecate current assertions
    • 93e284e chore: add chai and dirty-chai for better test assertions
    • c02b05f fix: use !== 0 instead of != 0
    • 8de121d v4.5.2
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump safer-eval from 1.3.0 to 1.3.5 in /examples/react

    Bump safer-eval from 1.3.0 to 1.3.5 in /examples/react

    Bumps safer-eval from 1.3.0 to 1.3.5.

    Commits
    • 6d5ed4b 1.3.5
    • fbbc623 Merge pull request #7 from commenthol/strict-mode-recommendation
    • 1a87237 fix: use strict mode recommendation
    • b81dab9 1.3.4
    • 073267a Merge pull request #6 from commenthol/fix-breakout-console
    • 25c3048 docu: Update tested browsers/ node versions
    • 25fbbe5 fix: sandbox breakout with console.constructor...
    • 1ff9411 chore: bump dependencies
    • d3167c8 1.3.3
    • ba69286 Merge pull request #5 from commenthol/warning
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • add comment to intersectionObserver docs re: placeholders

    add comment to intersectionObserver docs re: placeholders

    Just a simple addition to the docs. If I get a chance, I'll see if I can add a feature for passing in a height or aspect ratio or such.

    I think this is worth mentioning, as when I saw this behavior, I thought it was a bug where only the top edge of the image was triggering events.

    opened by khamer 1
  • Size is not 20 bytes

    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.

    opened by feross 1
  • Goodbye scrollToReveal, Welcome fetchOnDemand

    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?

    question 
    opened by ooade 1
Releases(1.1.2)
Owner
Ademola.
Frontend Engineer.
Ademola.
A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

Gustavo Ocanto 63 Jul 19, 2022
A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

Cube 4 Jun 19, 2020
A simple lazy-load list component based Vue 2.x: https://dwqs.github.io/v2-lazy-list/

v2-lazy-list A simple lazy-load list component based Vue 2.x, which will be on-demand rendering the list based container element's viewport. v1.x is n

Pomy 31 Nov 18, 2020
Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter ??

Blibli.com 2 Aug 13, 2018
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
Create lazy image, embed, video and element with animation just with attributes.

?? Lazy-attr v1.2.3 Create lazy loading request or element like image, iframe, video... Make custom animation on lazy and not lazy element on all brow

null 1 Jan 4, 2022
simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

Norman 25 Aug 11, 2021
A vue component for sleek and optimal lazy loading

sloth-loader ?? Image Lazy loader Vue Component with intersection observer Example here Installation yarn add sloth-loader npm i sloth-loader import c

Kenny Krosky 0 Oct 21, 2021
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

null 5 Sep 25, 2022
A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists

Lazy Load List Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists. Rend

OMER ANWAR 18 Sep 26, 2022
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 68 Apr 7, 2022
Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

Matheus Grieger 108 Jun 14, 2022
🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

?? vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

Irfan Maulana 91 Nov 18, 2021
Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

JounQin 36 Sep 25, 2022
A Lazy load plugin for Vue 3.x

vue3-lazy Status: Alpha. Lazy load plugin for Vue 3.x inspired by vue-lazyload. This plugin support very simple options, and easy to use. Install $ np

null 2 Feb 8, 2022
A Vue lazy loading directive.

A Vue lazy loading directive.

Vue Interface 0 Feb 4, 2022
A Vue.js component to lazy load images using the Intersection Observer.

vue-li-image A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

null 0 Mar 19, 2021
A plugin of lazy-load images for Vue2.x

vue-lazyload-images A plugin of lazy-load images for Vue2.x Support images lazyload in window or build-in element. Demo Installation npm $ npm install

LowesYang 60 Mar 28, 2022
simple calculation lib with lazy feature 🎲➕➖➗✖️

vue-lazy-calc this is a simple calculation plugin in lazy way. (inspired by lodash) features vue friendly strong typed lazy evaluation chaining method

Vincent Guo 8 Jul 30, 2020