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.
Related
I have implemented a menu of several tabs. When opening one of the tabs, several images are loaded from an external resource in jpg format.
If I open another tab, then other images are downloaded (this is expected). But when I go back to the previous tab, NextJS downloads the old images again.
How can I get rid of unnecessary downloads?
p.s. I want to clarify that depending on the tab, different components are drawn, removing others (perhaps this is important)
next js just compress your image and improve performance, you must not expect to not load the image when you will request to server again if you want to not download the image again the solution I think maybe can work: you must use your cash with react query when you want to request again when client change tab instead of axis or fetch,
react query will see if the image in the server is changed to load it again or not
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.
My website is in AngularJS v1.7.2 (using Laravel PHP framework as backend).
Current issue is the website freezes after resizing several times (2-3 or more times). I have checked Google chrome Task Manager Tool and it showing around 100% of CPU usage at the time of freezes. Same issue also occurred while testing the site in mobile by changing orientation several times. I have already tried solution like bind one way, add track by for ng-repeat, using tools like Batarang but no luck yet. Is there any proper solution for the issue. Please let me know.
UPDATE
The website almost finish. Only the freeze issue currently blocking us. The website mainly containing song, album, playlist, artist.
On home page there is banner (4 images) using iosSlider . then there are per category (8 categories) album (5 album each). on right sidebar there are song list. There are other pages like category page, artist page, album page, song page, user profile pages etc. Also there is a customised player using angular soundmanager2 API. Generally while viewing in desktop normally there no issue so far. But if I check using Device Toolbar (CTRL+Shift+M) and switch to other pages and rotate 2-3 times it just freezes. Even can't reload or refresh the page tab. If I check Chrome Task manager (Shift+Esc) it shows around 100% CPU usages
that time. Thing to notice the issue only occurring if I route to other page(forward or backward or both) then rotate 2-3 times. I am using AngularJS Batarang to sort out the issue but with no clue still now
SOLVED
The issue was with iosSlider. After removing the iosSlider no crash issue now.
I am building a React App using the react-router library and the Flux architecture.
Now a doubt came up. Should I load all the required data upfront or make each route load the data it needs when it's the time? It would be weird when the user enters the app through an edit page and, when he saves the form it goes to the list of objects but it's empty (has only the one object) until the data is fetched.
What would be the best approach?
You don't want to go deep into preloading data in anticipation of what the user is going to do. It improves the UX of the list screen but it degrades the UX of the edit screen. I've been down that road. It's fine at first, but as requirements change, and you start also loading this or loading that, the UX really goes downhill.
In Flux, you should only load data in the Action. To initialize the data for your component, you can call the appropriate Action from componentWillMount().
If you're worried about the user seeing no data when they navigate to the list screen for the first time, you should show some sort of loading indicator.
If your data loads slowly, you should implement a progressive loading scheme (maybe 5 items at a time).
For a look-and-feel example, just open up the main News Feed on facebook.com. Notice that initially (depending on your internet speed), there are no stories listed. You see blurry boxes into which stories will load. As the data loads, stories appear. They also have progressive loading implemented. Notice that as you scroll down the page (quickly), you'll see that blurry box at the bottom of the page before older stories are loaded and rendered.
I finally finished my phonegap app. I put the config.xml file and all my html, css and js files in a folder and uploaded it to phonegap build. I downloaded the ipa file to test it on my iphone.
The app has a page where articles are loaded from a json page that I am hosting on a server. The articles load properly. However when I hold the screen and scroll up or down, the screen starts shaking vigorously. I looked at other forums to see but all I found is DisallowOverscroll. But DisallowOverscroll set to true makes sure that the screen doesn't bounce if scrolled entirely to the bottom or to the top. But my problem is once I put my finger on the screen and scroll down, the page starts shaking up and down. I tried everything for the past two days but nothing worked. Any help is really appreciated.
I also made a video to make it easier. https://www.youtube.com/watch?v=O-Nd4ntZ46E
EDIT: I figured that the problem is arising from pull hook feature (pull to refresh. When I tested the page without the pull to refresh hook, it is working absolutely fine. But I am not sure how to use pull to refresh hook and not make the page judder at the same time.
Theres a mistake on your resolution for iPhone 6, it should be 750 x 1334, also check the image file is the correct size too.
You'll need to show code for the other problem.