React onClick refreshes page each time image slider buttons are clicked?

Question

So my image slider shows what looks like a refresh for the first 4 clicks of my image slider.

So, if you check my codesandbox and click the next or prev button all the way through the 4 images, you'll see a slight flash with a red background.

Here is my prototype https://codesandbox.io/s/sad-satoshi-l38sg?file=/src/Hero.js

The refresh/flash stops right after you get through the last image and it essentially resets. I only have 4 items in my data array that I am mapping through, so once you click through all the images, it seems to stop refreshing.

How do I get rid of this refresh everytime I click through my images?

I tried adding e.preventDefault() into the body of my next and prev slide button functions, but that didn't stop it.

Also, what is causing this flash/refresh for the first four clicks? If you refresh the page and click through the images, it does it everytime for the first 4 images

This is what my next and prev functions look like

        const nextSlide = () => {
          if (timeout.current) {
            clearTimeout(timeout.current);
          }
          setCurrent(current === length - 1 ? 0 : current + 1);
          console.log(current);
        };

        const prevSlide = () => {
          if (timeout.current) {
            clearTimeout(timeout.current);
          }
          setCurrent(current === 0 ? length - 1 : current - 1);
          console.log(current);
        };

you sure it's not the image loading? what you are describing and in the sandbox looks like loading images from an external source to me — , Dec 14 '20 at 01:06
I have no idea. Why does it only show the flash on the first four times, but after it goes through all the images it stops refreshing? Other sites image sliders don't show that flash in between image slides, so it has to be something going on — Johnxr, Dec 14 '20 at 01:07
how do you check that? I want to get rid of that with like an opacity animation, but don't know how to implement it — Johnxr, Dec 14 '20 at 01:09
If current is a variable which is set on the page component then the whole page will refresh because it's state updated. I don't know if that's the case, but it could be — Sam, Dec 14 '20 at 02:48

Diego Segura · Answer 1 · 2020-12-14T01:22:09.957

0

Your problem is that the image is not loaded until the DOM renders the <img> tag with the src and downloads it.

You can "bypass" this behavior by changing your images url to a base64 path. Just use a converter like https://base64.guru/converter/encode/image

For example in your Json file, change it like:


  {
    title: "Slide 3",
    image:
      "data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4......."
  }

where the right side of the comma is your base64 converted image

Anyway this is not the best because you will be loading all images on page load, which might be very unperformant.

You should try applying a loading strategy like explained here

edited Dec 14 '20 at 01:22

answered Dec 14 '20 at 01:10

Diego Segura

896
6
17

how would I pre load the images? also, do you think adding an opacity animation would hide this refresh? if so, do you know how I could implement that? – Johnxr Dec 14 '20 at 01:12
is it supposed to be like 10000 lines long of code? – Johnxr Dec 14 '20 at 01:21
a base64 string is just the encoded image... so yes, its quite big. Check about the loading strategy so you can place some kind of loader.... That would be performant – Diego Segura Dec 14 '20 at 01:22
doesn't that seem ridiculous to have like 100k lines of code for like 4 images? most examples I see show the base64 on like one line of code, so how is that possible? – Johnxr Dec 14 '20 at 01:26
Maybe that line is very long? XD Anyway, thats just the proof, you should apply a loader while the image loads, and forget about base64 strings. So instead of seeing the background image color (red) you see a spinner or something – Diego Segura Dec 14 '20 at 01:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/225928/discussion-between-diego-segura-and-johnxr). – Diego Segura Dec 14 '20 at 10:35

React onClick refreshes page each time image slider buttons are clicked?

1 Answers1