GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → rubenspgcavalcante → progressive-image-loading

rubenspgcavalcante / progressive-image-loading

Licence: MIT license
A live example of progressive image loading strategies

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Labels

reactwebpackexampleintersectionobserverprogressive-image-loading

Projects that are alternatives of or similar to progressive-image-loading

svelte-inview
A Svelte action that monitors an element enters or leaves the viewport.🔥
Stars: ✭ 358 (+630.61%)
Mutual labels:  intersectionobserver
BlazorIntersectionObserver
🔎 Intersection Observer API wrapper for Blazor applications
Stars: ✭ 35 (-28.57%)
Mutual labels:  intersectionobserver
stl-part-viewer
A lit-element web component that uses Three.js to display an STL model file.
Stars: ✭ 19 (-61.22%)
Mutual labels:  intersectionobserver
react-intersection-observer-hook
React hook to use IntersectionObserver declaratively
Stars: ✭ 58 (+18.37%)
Mutual labels:  intersectionobserver
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+5387.76%)
Mutual labels:  intersectionobserver
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+13361.22%)
Mutual labels:  intersectionobserver
react-intersection-observer-api-example
Showcasing of the Intersection Observer API in React with createRef()
Stars: ✭ 13 (-73.47%)
Mutual labels:  intersectionobserver
intersection-observer-examples
Practical, real world examples of Intersection Observer
Stars: ✭ 14 (-71.43%)
Mutual labels:  intersectionobserver
vue-visual
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.
Stars: ✭ 56 (+14.29%)
Mutual labels:  intersectionobserver
jsdom-testing-mocks
A set of tools for emulating browser behavior in jsdom environment
Stars: ✭ 37 (-24.49%)
Mutual labels:  intersectionobserver
blurry-image-load
A progressive image loading library. Inspired by Medium’s similar technique.
Stars: ✭ 26 (-46.94%)
Mutual labels:  progressive-image-loading

Progressive Image Loading

What this repository is for?

A small example of the how to apply progressive image loading and some strategies currently used on web apps for that.
Original post on Medium: Progressive Image Loading and IntersectionObserver
Check it here: progressive-image-loading.surge.sh

Dependency

This project depends in a GO lib, called primitive. Before running the yarn pre-build you need to install primitive.

Setup

First run yarn install to install the dependencies and then, run yarn pre-build to generate the image placeholders and finnally yarn start to run the webpack-dev-server.

Credits

Ramphastos toco TOCO TOUCAN by Dr. Nasser Halaweh - Picture under creative commons license

License

This project is under the MIT license

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].