Is there a way to preload every image before showing the page to a user in Gatsby? Let's say that I want to avoid any preload effect that Gatsby is offering.
I am also wondering how I can force images that are not visible to preload. This is a major problem which I am trying to solve. Please take a look: https://festive-bassi-ce307b.netlify.app/.
If you try using the carousel then the next image that shows up will start preloading because it never was shown. This is really silly because at that point the whole page is loaded and the images as well.
I am using the gatsby-plugin-image and it's a staticImage component.
Example:
<StaticImage
className="img1 img"
src="../images/era_of_manufacturing_ilustrations/work_planning.png"
alt="work planning image"
placeholder="blurred"
layout="constrained"
quality={100}
/>
I also saw that the older gatsby-image plugin had a "loading" property that you could set to eager load. Could that property solve my problem?
Is there a way to preload every image before showing page to user in
Gatsby?
This is what eager attribute (from loading property) does according to the docs:
Loading behavior for the image. You should set this to eager for
above-the-fold images to ensure they start loading before React
hydration.
If you add:
<StaticImage
className="img1 img"
src="../images/era_of_manufacturing_ilustrations/work_planning.png"
alt="work planning image"
placeholder="blurred"
layout="constrained"
loading="eager"
quality={100}
/>
They will start loading before the rehydration process as if they were above-the-fold.
I don't understand the "preloading process" that you've pointed. Gatsby images are lazy-loaded by default but if you don't want to add a placeholder effect (the blurring), you can omit the placeholder property in the StaticImage.
Related
im trying to add skeleton in my react project i render a gallery images from backend those images are different size (1mb,0.5mb) so the skeleton closed earler in my website thats a problem
and other size photos still not come to front but skeletton stoped to loading skeleton loading
i tried to load gallery images those ah bigger size so i add skeleton but there is some images is low size so skelton stoped after loading small size images
You can create an image component and then use a skeleton inside it.
In this case, if the image is not loaded, the component shows a skeleton. Otherwise, it shows the image. Then you have to map through your images and render the image component.
imageIds.map(id => {
return (
<ImageContainer imageId={id} />
)
})
I assumed you have an API call to get images and a list of image IDs. you can call the API inside the component and check if it is loading, use the skeleton. Otherwise, show the image.
You can implement the logic however you want.
I am trying to include videos in my react project for that I am using ReactPlayer by cookpete.
Now the problem is it doesn't correctly parses or make us of, whatever, the url of the video inside the browser's html video tag where in the src attribute I can see src(unknown) is written. The weird thing is it once in a while behaves normally as it is expected to do. When I change the src attribute's value to the video's URL manually by inspecting the browsers html it starts getting played and I can do normal stuff with it. Here is the code which I have written.
<ReactPlayer
playing={isPlaying}
url="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
width="100vw - 69vw"
height="100vh - 65vh"
/>
The isPlaying stuff is a boolean which is being mantained inside React.useState() with intial value set to false.
The issue is a bug with React.StrictMode. A url with .mp4 extension isn't reloaded on the second reload induced by StrictMode.
I have an issue with my images in react. When i let the image render like this:
import road from '../../../../assets/images/icons/road.png';
<img src={road} />
It will work but i want it to be dynamic relying on the input of data.
So i tried it this way (where icon is refering to a data set resulting in road):
import road from '../../../../assets/images/icons/road.png';
...
render() {
const { place, date, icon, progress } = this.props.stage;
...
<img src={icon} />
So my guess is that there is an issue with referencing here. From my question you can understand that i am absolutely new to react. What i also noticed is that with the method above i will get an unused var error if i dont load this image. So for example i have a couple of these icons but depending on the data in the dataset it will only render a few. Which i find kind of messy.
I hope you can steer me towards the right direction. Kinda frustrating not being able to implement an image...
With this: Load images based on dynamic path in ReactJs
posted from Subham Khatri i was able to get the answer i desired.
<img src={require(`../../../../assets/images/icons/${icon}.png)`} />
As I understand you are trying to pass the image from this.props.stage. Did you first try console.log(icon). what do you see in the console window. First we need to know whether the data is being passed from props.
I have a component where I want to render different components based on screen size. If I reload the page while on mobile view, everything is ok, NavBarMobile is rendered and NavbarDesktop is not.
If I reload the page while on desktop view, then my NavbarMobile is rendered again instead of NavBarDesktop.
If I start resizing the screen to mobile and back to desktop view, NavBarDesktop is rendered correctly.
So, the problem is first page load while in Desktop view, how to fix that?
const { mainAppComponents, } = this.props
const { visible, } = this.state
return (
<Fragment>
<Responsive maxWidth={767}>
<NavBarMobile
onPusherClick={this.handlePusher}
onToggle={this.handleToggle}
rightItems={rightItems}
visible={visible}
>
{mainAppComponents.header}
{mainAppComponents.routes}
</NavBarMobile>
</Responsive>
<Responsive minWidth={768}>
<NavBarDesktop rightItems={rightItems}>{mainAppComponents.header}</NavBarDesktop>
{mainAppComponents.routes}
</Responsive>
</Fragment>
)
Igor-Vuk, I put together a quick codesandbox example just to make sure there was not a problem with how you are trying to implement the min/max width props. As you can see from this example, they do in fact work as expected. https://codesandbox.io/s/98pk46l7vr
Without seeing the rest of your component, or application, the issue may be due to something in your router. I'd recommend trying to remove some of the other components you are returning as children of the Responsive component to see if it starts working as expected (like in my codesandbox example). If it works, then you know the problem is somewhere in the children. If it does not work then there is a greater problem above in your app.
If you are using SSR, on initial load the content was rendered and served with the Responsive component having no knowledge of the viewport. So you may need to also add a CSS media query.
I'm new in ReactJs.
I need a lazy loader in my application when page is scroll down,
I'm using (https://jasonslyvia.github.io/react-lazyload/examples/#/normal?_k=rz3oyn)
Actually, this is working fine but first time it load all data.
I want to make api call and set data when page will scroll down.
Thank you.
Most probably what you need is an infinite scroll functionality. There are some good options for React when it comes to loading asynchronous data:
1) If you need high performance (a lot of results coming from the server) you can try react-infinite. As docs say:
React Infinite solves this by rendering only DOM nodes that the user
is able to see or might soon see.
2) Another simple option would be: react-infinite-scroller
General principle to make these libraries work is to pass their props which will let the module know when to make a request or when to wait.
<InfiniteScroll
pageStart={0}
loadMore={loadFunc}
hasMore={true || false}
loader={<div className="loader">Loading ...</div>}
>
{items} // <-- This is the content you want to load
</InfiniteScroll>
loadFunc will make an API call to the server and will set hasMore to false until it is successfully resolved.