I'm trying to combine Picturefill 2.1 with any available lazy load plugin, but I had no success yet. Most of the code I found on Google is for Picturefill 1.
Does anyone here has done this before and could help me? Picturefill is working just fine, the problem is the lazy load part because I don't have the images width and height, which causes all images to be loaded at once.
In case you don't need to support IE8:
use lazysizes - responsive image lazy laoder
Related
I've got some issue with the loading of the website i'm working on currently there is some heavy images on it and i'm using a "ProgressiveImg" component to lazy load them but still as I scroll through the page, the different components appear slowly.
I've tried to mimic it in a codesandbox : https://codesandbox.io/s/hopeful-montalcini-0kb3hw?file=/src/components/Component2.js
Is something wrong with my "ProgressiveImg" component ? What would be the best alternative ? Should I just set up a loading screen and pre-load all the images at the launching ?
Thanks in advance :)
I am generating pdf using react-to-print library,
But i want to break the page in new page,
There is css property break-after:always, it can work, but not all major browser supports it now,
Anyone know any other method then brute force margin ?
Working with pdf is hard, specially css part.
https://www.npmjs.com/package/react-to-print
https://developer.mozilla.org/en-US/docs/Web/CSS/break-after
I would like to recommend to use React PDF npm library. Please check https://react-pdf.org
Hello everyone first of all I wasn't able to find this kind of carousel anywhere for free, so I need advice about how to build it what it needs to be built.
Here is the image of the carousel
You can use Flicity
they also have react-flicity-component package for reactjs and it is easy to use
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
I am trying to build a web app that allows users to upload images then select parameters for resizing and cropping. I've decided I'm going to handle the cropping with react-cropper but I can't figure out how to handle the resizing itself. Are there any packages you all would suggest? Or otherwise, can I have some advice on how to implement this in react in a way that would produce good looking images well-scaled w/ consistent aspect ratio?
I'm new to reactjs and development in general so any detailed advice on how to go about building this system would help a ton.
Thanks
react
The question will be: Will you handle the image resizing / optimising on the server or within your browser?
I recently did one project that required to manipulate DOMs in the browser and export as a new image. I was using a library dom-to-image
which can convert your React components into jpeg, png or svg. So the solution is that you handle the resizing with any React or javascript libraries like react-resizable in the browser and export the image with dom-to-image.
I hope it helps.