How better to make when image/image relative data are rearead?

JavaScript
1

Hello,
With jQuery v3.6.0 I have a page with image and relative data about this image.
I have “Prior” and “Next” buttons, clicking on which image/image relative data are rearead with
ajax request(without page reloading) and I see page content flashing on new image loading. I use method :

$("#div_image_container").html(response.html); // image/image relative data are in response.html

If there is some way to implement it to look better? I would some kind of effect way of old image
closed and new image is opened? Some libraries?

Thanks in advance!

2

You cache it. You have an object, starts off empty. The keys would be the URLs you are making the requests for data to, the values would be the data.

When you make a request for your data, you check the object to see if you’ve already made that request (ie if there is a key matching the URL). If you haven’t, store the data in the object under the url you made the request to. Then you render your thing in the HTML.

Next time your UI needs to render that data, you already have it stored, you don’t need to make a network request, you just pull it out of the cache, it’s instant

Example:

const cache = {};

async function getTheData (url) {
  if (url in cache) {
    return cache[url];
  } else {
    const data = await $.get(url);
    cache[url] = data;
    return data;
  }
}
3

The above means the first time you press the button there’ll always be a pause for a network fetch. So option 2:

You get everything at once. Just make all the requests then render your carousel thing using all the data, no request on each button press.

Example:

async function getTheData (arrayOfUrls) {
  const requests = arrayOfUrls.map(url => $.get(url));
  // This gives you an array of all the data:
  return await Promise.all(requests);
}

Option 1 is if for you don’t know everything in advance – eg the next URL is something dynamic that comes from user input

Option 2 is if you do – ie you already know the URLs of every image in the carousel thing)

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.