Comments (10)
@dav-is thanks for opening the issue, we already have the provision for that. If we add '?placeholder to any image we import, it will present us with very small version of it. Let me add this to my todo of examples.
Thanks
from react-pwa.
I’m worried you misunderstood. The placeholder images in your prior examples are blurred in the image, not CSS. And there is no Transition once the full image is loaded.
from react-pwa.
@dav-is ohh I see.. absolutely a transition would be good and yes I added the wrong example, if one uses
‘’’
Import AbcImage from “./abc.png?sizes=100w+200w&lightweight”
‘’’
This will give you a really small version of image. So we will then implement a transition with css! That would be more UX friendly.
Will definitely implement that.
from react-pwa.
Just gonna lob this in here as food for thought. https://images.guide/
from react-pwa.
Thanks @jhabdas that is very helpful. Thank you so much
from react-pwa.
@dav-is @jhabdas check this PR and https://react-pwa.now.sh/progressive-image-rendering
for implementation of progressive image with lightweight, I might not have got it 100% right, but you guys can share examples where I can make it even better. :)
from react-pwa.
Progress makes perfect! Thanks for all you do @tirthbodawala
from react-pwa.
from react-pwa.
@dav-is Right, I haven't added any transaction, I have just used lightweight with placeholder. Can you please share any example where I can understand the functionality you are looking for ?
from react-pwa.
picture {
filter: blur(25px);
transition: blur .5s;
}
picture.is-loaded {
filter: none;
}
When the full picture is loaded, add the .is-loaded
class.
from react-pwa.
Related Issues (20)
- not able to start server, installation was successfull HOT 2
- npm start not working HOT 3
- npm start fails on Windows. HOT 3
- build, missing index.html HOT 1
- deployment guide on heroku HOT 1
- 运行报错 HOT 2
- React Confusion HOT 1
- 500 (Internal Server Error) HOT 5
- "npm start" is not working HOT 10
- Issue while npm start HOT 1
- reactpwa.com - host access Error 520 HOT 2
- chokidar.js 'return' outside of function HOT 2
- How To Build APK File For Android & IOS ? HOT 1
- Getting CSS problem on windows 10 OS HOT 1
- There is not sufficient document to start project HOT 3
- npm start on your homepage should be npm run dev
- npm run dev failed to start - Could not find a declaration file for module '@reactpwa/core/start HOT 1
- How can i change the html and body class and add stuff to the head element
- Documentation update. HOT 1
- How Can we configure tailwindCSS in PawJS version ^3.0.2-beta.17?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pwa.