npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

qoopido.rescale

v3.0.1

Published

Powerful & lightweight lazyloading responsive image solution using microdata in JavaScript and PHP

Downloads

16

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

qoopidoqoopido

Keywords

imageimageslazyloadresponsiveadaptivedynamicmicrodatamediaqueryselectorjsjavascriptscriptlightweightPHP

Readme

If you would like to support this project feel free to star or fork it, or both. By doing so it will be easier to get it into some of the usual CDNs :)

And if you like it and want to help even more, spread the word as well!

Qoopido.rescale

Rescale is my personal approach at responsive images using Qoopido.demand as its (localStorage caching) module loader as well as some modules from Qoopido.nucleus, my personal & modular JavaScript utility library.

Image variants will get generated server-side via PHP (which is included on GitHub) and cached. The class comes with cache validation and adjustable garbage collection as well.

The JavaScript client part will lazyload perfectly sized images matching either a mediaquery and/or a simple selector. Images not currently visible (or within an adjustable threshold around the currently visible area) will have their aspect ratio changed accordingly but will not get loaded as long as they are not visible.

Each image candidate can have its own width & height allowing different image aspect ratios for a single element depending on mediaquery and/or selector. Keep in mind though that width and height will only be used to calculate a ratio. The image itself will always auto fit into its own CSS constraints or the ones defined on its parent.

Compatibility

Qoopido.rescale is officially developed for Chrome, Firefox, Safari, Opera and IE9+.

I do test on OSX El Capitan and Rescale is fully working on Chrome, Firefox, Safari and Opera there. To test IE9, 10, 11 as well as Edge the official Microsoft VMs in combination with VirtualBox are being used.

External dependencies

To load Rescale Qoopido.demand and some modules from Qoopido.nucleus are required.

Availability

Qoopido.rescale is available on GitHub as well as jsdelivr, npm and bower at the moment. CDNJS might follow in the near future.

Loading Rescale & usage

To be able to use Rescale you will need to load Qoopido.demand which comes with extensive documentation within its own repo. If you need a working example of a main.js for Qoopido.demand simply look at the CodePen demo I officially provide for Qoopido.rescale.