2

When I click on a "Load more" button in the website, there are new variations loaded. You can spot them on the "Network" tab in the inspector of google chrome

See here the output when I clicked, the new color options are shown

Once a request with a status are logged in this "network" tab. Is it possible to add a listener or some sort to a specific log of this, for example: once the "Rectangle-Copy-14.png" is logged, call a function.

Asking this for this project but also for in the future, I don't use a lot of javascript in this project but for in the future I will.

Sacha
  • 25
  • 1
  • 5
  • Can you change the html element that loads the png image? If so, does this answer your question? https://stackoverflow.com/questions/280049/how-to-create-a-javascript-callback-for-knowing-when-an-image-is-loaded – Rocky Sims Sep 15 '22 at 08:12
  • Please provide enough code so others can better understand or reproduce the problem. – Community Sep 15 '22 at 13:44

1 Answers1

2

If the browser supports it, you could use the resource timing API. I would assume you would have to keep listening to the resources of performance, like :

 performance.getEntriesByType("resource")

Then you can filter this entries by name or type :

resources.filter(resource => resource.name == "Rectangle-Copy-14.png")

If the filter returns a PerformanceResourceTiming with a responseEnd you can then establish that the resource has been loaded and do whatever after.

eloimondelo
  • 66
  • 4