Faster image changing in JS

Question

I have an audio player I built with HTML5 and JavaScript.

Clicking on the play button tells JavaScript to play the audio and change the src on the play button image (play.svg) to the pause.svg icon. The slowness here is noticeable. Takes time to go to the server and fetch that image.

What's a faster way to change the play button to a pause button?

You may preload as Js Image object or just keep hidden image with that of pause icon — , Apr 27 '18 at 04:01

score 4 · Accepted Answer · answered Apr 27 '18 at 04:02

4

The question is quite broad, but to give you some ideas:

You could use two image tags and show / hide them on the page.
Use a CSS sprite and changing the CSS class
Preload the SVGs using Javascript

Without seeing your code I don't know what the best solution for you is but one of these options should cover what you are looking for.

answered Apr 27 '18 at 04:02

csilk

2,732
3
23
40

Yeup, thanks! Will test things out. I bet CSS show/hide is the fastest. – Costa Michailidis Apr 27 '18 at 04:15

Faster image changing in JS

1 Answers1