How can I add a loading icon to an image change event without using jQuery?
I'm new to the coding world and Stack Overflow community, so please bear with me. I've been searching for a solution to my specific situation but haven't been able to find one.
I have code on a Weebly webpage that changes a still image to an animated GIF on mouseover, and back to the still image on mouseout. The image change works properly, but since the GIF is large, it takes a while to load. However, there is no indication that the image is loading when hovered over. I've tried various methods but none have been successful.
I've attempted:
Using CSS image animation as a loader (works well, but unsure where to add it)
Using a loader as a CSS background image (still image doesn't disappear on mouseover)
Adding a div with a loader over the image (mouseover isn't registered through the div)
Using buttons to start/stop and animate them during the load
I know preloading the GIF in the background would consume too much data on mobile, and storing images locally isn't feasible due to constant updates. After extensive research and tutorials, I haven't found a non-jQuery solution that fits my needs. I'd prefer not to use jQuery due to difficulty implementing it into Weebly's embedded HTML box. I hope to achieve this with HTML, CSS, and JavaScript if possible.
Below is an example of the code used in the Weebly embedded HTML box:
<img id="pleasework"
src="STILL IMAGE URL HERE"
class="picswap"
alt="not working"
onmouseover="document.getElementById('pleasework')
.src='GIF IMAGE URL HERE'"
onmouseout="document.getElementById('pleasework')
.src='STILL IMAGE URL HERE'"
/>
I simply want to insert a loading icon between the still and GIF images. It may be a simple fix, but I need guidance on how to proceed. Any help would be greatly appreciated.
P.S. This is my first post on Stack Overflow, so please let me know if I could improve my question. Thank you for your time.