I am making a little game with cards with React JS where you are looking for pairs of cards that are same. The game is fetching image URLs for random animal images from several APIs every time you restart the game. The cards are turned on their back at start of the game and then you can flip them to see their face. The problem I run into is that depending on from which API the image is coming the game can be bogged down by fetching the actual image when the card is turned. So what I would like is to kind of have the game actually fetch all the images at the start and then just use the cached images during the game itself, but I am not sure how I would load the images, as they only get fetched through image src attribute when they are turned. What would be the best approach to do this please?
I tried looking for solutions online, but I cannot seem to find a similar issue.
Related
I have a React app that cycles through questions for a user to answer. Each question has a different background image. The questions are cycled through twice so each background image is displayed to the user twice during the user experience.
I was having some issues with image loading lag, so I implemented an 'initial load' cache to put all images into the browsers cache. Similar to what's shown here.
I've confirmed in Dev Tools that the necessary images are being added to cache at the initial load (good!). However I noticed that as a move through the app, each image is added to the cache again. Thus, I still have my loading lag for these images
When I am using these images, I currently import at the top such as:
import redGreenBackgroundImage from 'assets/images/redGreenBackgroundImage.png';
and in the component reference with
<img src={redGreenBackgroundImage}/>
I'm thinking that React/the browser is viewing the image as being different each time, so it's adding to the cache? However I haven't been able to find anything to support that in my Googling.
I have all the pictures in a folder inside the react.js component like a hundred pictures. I don't want to show those pictures down or side by side. I want the pictures to come from the same place one by one
It's a bit hard to tell what your question is, but if you're wanting to have a slideshow of those 100 pictures you can use a package such as https://www.npmjs.com/package/react-slideshow-image
I have a website which is deployed on Netlify below:
https://hungry-mclean-362570.netlify.com/
Github:
https://github.com/shindosu/mutsuki-portfolio-client
To give a bit of a background, the app is powered with React JS. In the Home page within the <div id="right-side">, I have two React components being rendered. They each are powered by THREE JS, and it is alternating between two pictures infinitely with image transition animations via GSAP. So in total, I have 4 images being rendered on the right hand side. The size of the images are around 13MB total (more images to come)
I also have a slider, where if the value hits >=50 then the styling and the images will change to let the user know the "category" of the images that they are looking at.
Now, it is no where near being done so don't mind the incompleteness. What's bothering me is the loading time of the images (handled by THREE JS, GSAP) is taking an insanely long time to load, which I think is also affecting the loading time of the other elements as well.
How am I able to speed up the loading process?
I tried decreasing the image sizes (it was 60MB before..currently 13MB!); am trying to shred off more but the most I can get down to is around 600~KB/img without losing any substantial quality.
Are there any other way to get around this? This will be a portfolio website so there's more images that will be in the projects page, so I'm assuming if I continue the way that I'm doing right now the outcome is going to be as or more worse than the page that I am working on.
Thank you for your time!
To load images faster in a React application you can use one of the following techniques:
Use lazy loading method --> The image loads only when the user scrolls to it.
Use blur technique --> This loads the images in low resolution initially before the original load
Use JPEG-XR and WebP instead of PNG, JPG etc.
For more details you can refer to https://teacode.io/blog/how-to-speed-up-your-react-app-using-cloudinary-and-lazy-loading
Note: I am not an expert. I was also searching how to increase load speed of images and came across some articles like that mentioned above.
Hi I’m building a front end web app using reactjs, my app will map over different array of dogs/cats/animals with multiple props and a couple images each. The ui has a search box which then filters out relevant animals.
My question is if my list were to get quite large, do I need to have it stored in a back end ? Or can it all be stored in front end, there will be no sensitive information or anything. So im not worried about security. I do not need to receive any information from the users. Basically it’s just a website for people to browse through.
And my second question. Once deploying to a host, Im currently leaning towards AWS. Is updating/adding/subtracting from my arrays simple as deleting the file and adding the new one into the bucket ??
Sounds exciting! But let's first back up a bit, and take stock of what we're trying to do. Essentially: we want an app that will show a bunch of images with functionality (e.g. filtering).
All images/photos (e.g. this cat photo) are hosted somewhere. Period. So, you can be the one responsible for hosting the images, or you could just have <img /> tags in your react app and refer to an existing img src links, where the image sources are being hosted by someone else.
So to answer your question: my question is if my list were to get quite large, do I need to have it stored in a back end ?
Not necessarily - if you're just referencing a bunch of images from a site that someone else is already hosting, then you're good.
As for this point: Or can it all be stored in front end, there will be no sensitive information or anything.
This question is kinda hard to answer, because nothing is really ever 'stored' in the front-end (let's ignore caching). Images live on the server, and the client (e.g. your chrome browser) makes requests to the server to get the images.
Now: if you want to upload your own photos or let users upload their photos. That's a very different story.
You would want to use s3 buckets. They could host your images.
However, based upon your post, I really think you should start step-step, and not host your own images (i.e. not have a backend), and instead just start by using images already on the internet. Good luck :)
I have a site where I need to show two different videos on it and I need to be able to do some actions with the videogular API.
The thing is that when I share the $API from the view to the controller using vgPlayerReady($API) the method I call to one video is applied in both! For example I want to mute one video but when I call setVolume() with the API returned, both videos get muted.
Is this a known issue?
Is there other way to mute just one video?
The workaround I found to fix this was to setVolume(0) when the video that I want to be muted is ready to be played, and setVolume(1) when the video I want with volume is ready to be played.
The volume property didn't work for me.